元素出现在页面上时的聚合物 1.0 事件

Question

我不明白如何在元素出现在页面上时立即为它制作 css 动画，例如 css3 变换旋转。当我在 attached(){performRotation()} 中设置元素出现在页面上时它已经旋转。我无法在所有文档中找到我需要订阅哪个事件才能开始动画。

Answer 1

您可以在 NeonAnimatableBehavior 和 NeonAnimationRunnerBehavior 的帮助下做到这一点，您可以在 animationConfig 属性中配置动画，然后使用 [=15= 播放它们] 函数由 NeonAnimationRunnerBehavior .

实现

请检查lifecycle callbacks and neon-animation demos。

behaviors: [
  Polymer.NeonAnimatableBehavior,
  Polymer.NeonAnimationRunnerBehavior
],

properties: {
  animationConfig: { ... },
}

...

ready: function() {
  this.playAnimation('entry');
}

我使用上述元素为您制作了一个 simple example 来让您快速入门。

更新

您可以根据其中一个生命周期回调中的给定属性修改每个已配置的动画，例如ready回调：

var entryAnimation = this.animationConfig.entry[0];
entryAnimation.transformFrom = this.doSomethingTo(this.someProperty);

请检查更新后的 demo。

元素出现在页面上时的聚合物 1.0 事件

polymer 1.0 event when element appears on page

event-handling

polymer

polymer-1.0