0

我有一个组件 - 从底部到顶部动画的浮动数字。这段代码运行良好：

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

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

console.log(this)返回 animationConfig 对象值的内部函数正确标识this为所需的<floating-digit>. 不幸的是，没有可用于参数化动画配置的属性。它们仍然未定义。

你们中的任何人都可能知道如何访问这些参数？

4

1 回答 1

0

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

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

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

于 2017-06-29T08:50:40.713 回答