Javascript Polymer JS-参数化霓虹灯动画配置

我有一个组件-从下到上的浮动数字动画。 这个代码运行得非常好：

<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>

我以这种方式更改了animationConfig（仅更改了摘录）：

但它不起作用。此函数似乎无法访问元素中定义的所有属性

console.log（this）

返回animationConfig对象值的函数内部正确地将

此

标识为所需的

实例。不幸的是，没有可用于动画参数化配置的属性。它们仍然没有定义

---

你们中有谁可能知道如何访问这些参数吗？

如果有人感兴趣，我已经找到了解决方案。不幸的是，该解决方案不使用聚合物来获取这些参数

我正在使用本机web 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>

如果有人知道为什么这不能正常工作，我们将邀请您分享您的解决方案

  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>