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

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

返回animationConfig对象值的函数内部的

console.log(this)正确地将this标识为<floating-digit>的所需实例。遗憾的是，没有可用于参数化动画配置的属性。它们仍未定义。

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

Answer 1

如果有人有兴趣，我找到了解决方案。不幸的是，这个解决方案不使用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>

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

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

1 个答案: