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

Question

我不明白如何使一個元素的CSS動畫不會比它出現在頁面上，如css3變換旋轉。當我在attached(){performRotation()}中設置元素出現在頁面上時，它已經旋轉。我無法在所有文檔中找到我需要訂閱以開始動畫的事件。

Answer 1

你可以做到這一點的NeonAnimatableBehavior和NeonAnimationRunnerBehavior的幫助下，您可以設定動畫的animationConfig屬性，然後與由NeonAnimationRunnerBehavior實現playAnimation('name')功能發揮他們。

請檢查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。