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

Question

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

Answer 1

你可以在NeonAnimatableBehavior和NeonAnimationRunnerBehavior的帮助下做到这一点，你可以在animationConfig属性中配置你的动画，然后用NeonAnimationRunnerBehavior实现的playAnimation('name')功能来播放它们。

请查看生命周期回调和霓虹灯动画演示。

behaviors: [
  Polymer.NeonAnimatableBehavior,
  Polymer.NeonAnimationRunnerBehavior
],
properties: {
  animationConfig: { ... },
}
...
ready: function() {
  this.playAnimation('entry');
}

我用上面的元素给你做了一个简单的例子，让你快速开始。

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

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

请查看更新后的演示