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

Question

我无法理解如何在页面上显示css动画，就像css3变换旋转一样。当我在attached(){performRotation()}设置元素出现在页面上时，它已经旋转了。我无法在所有文档中找到我需要订阅哪个事件才能开始动画。

Answer 1

您可以在NeonAnimatableBehavior和NeonAnimationRunnerBehavior的帮助下完成此操作，您可以在animationConfig属性中配置动画，然后使用playAnimation('name')功能播放它们NeonAnimationRunnerBehavior。

请检查lifecycle callbacks和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。