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>

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

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

Polymer JS - Parametric neon-animation config

javascript

web-component

polymer

polymer-1.0

neon-animation