Polymer JS - Параметрический неоновый анимационный конфиг

Question

У меня есть компонент - плавающая цифра, которая оживляет снизу вверх. И этот код работает отлично:

<dom-module id="floating-digit">


<style>
    span.increment {
      display: none;
      font-size: 12px;
      font-weight: normal;
      position: absolute;
      right: -10px;
      top: 1.25em;
    }
  </style>

  <template>
    <span id="floater" class="increment">+[[digit]]</span>
  </template>

</dom-module>


<script>
  Polymer({
    is: "floating-digit",
    behaviors: [Polymer.NeonAnimationRunnerBehavior],
    properties: {
      digit: {
        type: String,
        value: "",
        observer: '_animateDigit'
      },
      transformFrom: {
        type: String,
        value: "translateY(0)"
      },
      transformTo: {
        type: String,
        value: "translateY(-100%)"
      },
      animationConfig: {
        value: function () {
          return {
            'animate': [
              {
                name: 'fade-in-animation',
                node: this.$.floater,
                timing: {duration: 100}
              },
              {
                name: 'transform-animation',
                node: this.$.floater,
                transformFrom: "translateY(0)",
                transformTo: "translateY(-100%)",
                timing: {duration: 1500}
              },
              {
                name: 'fade-out-animation',
                node: this.$.floater,
                timing: {duration: 2000, delay: 2000}
              },

            ]
          }
        }
      }
    },
    listeners: {
      'neon-animation-finish': '_onNeonAnimationFinish'
    },
    _animateDigit: function _animateDigit() {
      this.$.floater.style.display = "inline";
      this.playAnimation('animate');

    },
    _onNeonAnimationFinish: function _onNeonAnimationFinish() {
      this.$.floater.style.display = 'none';
    },
  })
</script>

Но в моем приложении есть несколько мест, где я хочу использовать этот компонент с разными значениями transformFrom и transformTo.

Вот почему я добавил в свой floating-digit свойства transformTo а также transformFrom, поэтому я могу параметризовать их, когда я хочу, чтобы эти значения отличались от значений по умолчанию:

<floating-digit id="floating-0" transform-from="translateY(-20%)" transform-to="translateY(-80%)" digit="[[someNumber]]"></floating-digit>

Я изменил animationConfig таким образом (только измененный отрывок):

{
 name: 'transform-animation',
 node: this.$.floater,
 transformFrom: this.transformFrom,
 transformTo: this.transformTo,
 timing: {duration: 1500}
},

Но это не работает. Эта функция, похоже, не имеет доступа ко всем тем свойствам, которые определены в элементе.

console.log(this) внутри функции, возвращающей значение объекта animationConfig, правильно определяется this как желаемый экземпляр <floating-digit>, К сожалению, без свойств, которые можно использовать для параметризации конфигурации анимации. Они остаются неопределенными.

У кого-нибудь из вас есть идея, как получить доступ к этим параметрам?

Answer 1

Если кому-то интересно, я нашел решение. К сожалению, это решение не использует Polymer для получения этих параметров.

Я использую нативный веб-API для этого: Мой animationConfig выглядит так:

  animationConfig: {
    value: function () {
      let transformFrom = this.attributes.getNamedItem('transform-from') ? this.attributes.getNamedItem('transform-from').textContent : "translateY(0)";
      let transformTo = this.attributes.getNamedItem('transform-to') ? this.attributes.getNamedItem('transform-to').textContent : "translateY(-100%)";
      return {
        'animate': [
          {
            name: 'fade-in-animation',
            node: this.$.floater,
            timing: {duration: 100}
          },
          {
            name: 'transform-animation',
            node: this.$.floater,
            transformFrom: transformFrom,
            transformTo: transformTo,
            timing: {duration: 1500}
          },
          {
            name: 'fade-out-animation',
            node: this.$.floater,
            timing: {duration: 2000, delay: 2000}
          },
        ]
      }
    }
  }

И я звоню так же, как и раньше:

<floating-digit id="floating-0" transform-from="translateY(-20%)" transform-to="translateY(-70%)" digit="5"></floating-digit>

Если у кого-то есть идея, почему это не работает должным образом, вы более чем приглашены поделиться своим решением.