當元素出現在頁面上時，聚合物1.0事件

Question

我不明白如何在不早於頁面上顯示的情況下將css動畫制作成一個元素，例如css3變換旋轉。 當我在attached(){performRotation()}設置元素時，當元素出現在頁面上時，它已經旋轉。 在所有文檔中都找不到我需要訂閱哪個事件才能啟動動畫。

Answer 1

您可以在NeonAnimatableBehavior和NeonAnimationRunnerBehavior的幫助下NeonAnimatableBehavior NeonAnimationRunnerBehavior ，可以在animationConfig屬性中配置animationConfig ，然后使用由NeonAnimationRunnerBehavior實現的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);

請檢查更新的演示 。