पॉलिमर - एक डीआईवी

Question

एनिमेटिंग मैं पॉलिमर सीख रहा हूं। मेरे पास एक तत्व है जिसमें div शामिल है। मैं उस div की ऊंचाई को एनिमेट करना चाहता हूं।

मेरी-element.html

<dom-module id="my-element">  
    <template> 
    <div id="container" style="height:100px; background-color:green; color:white;"> 
     Hello! 
    </div> 

    <paper-button on-click="_onTestClick">Expand</paper-button> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-element', 

     _onTestClick: function() { 
     // expand the height of container 
     } 
    });  
    </script> 
</dom-module> 

मैं तो बढ़ने ऊंचाई एनीमेशन प्रेरणा के लिए here दिखाया प्रयोग किया है: यह करने के लिए की कोशिश में, मैं निम्नलिखित मिल गया है।

Polymer({ 
    is: 'grow-height-animation', 
    behaviors: [ 
    Polymer.NeonAnimationBehavior 
    ], 
    configure: function(config) { 
    var node = config.node; 
    var rect = node.getBoundingClientRect(); 
    var height = rect.height; 
    this._effect = new KeyframeEffect(node, [{ 
     height: (height/2) + 'px' 
    }, { 
     height: height + 'px' 
    }], this.timingFromConfig(config)); 
    return this._effect; 
    } 
}); 

मेरे चुनौती है, मुझे समझ नहीं आता "कंटेनर" की आईडी के साथ div तत्व के साथ इस एनीमेशन एकीकृत करने के लिए कैसे: तो, मैं मूल रूप से, एक एनीमेशन इस तरह परिभाषित किया गया है। जो कुछ भी मैं देखता हूं वह ऐसा लगता है जैसे यह केवल पॉलिमर तत्वों पर काम करता है। फिर भी, मैं यह समझने की कोशिश कर रहा हूं कि पॉलीमर का उपयोग करके div को एनिमेट कैसे करें। मैं क्या खो रहा हूँ?

धन्यवाद!

Answer 1

बहुलक तत्व पृष्ठ का ठंडा guide on animations है, लेकिन मुझे लगता है कि आप इसे पहले ही पढ़ चुके हैं और यह आपके प्रश्न का काफी जवाब नहीं दे रहा है, अगर ऐसा है, तो यह सहायक होना चाहिए।

सभी की

सबसे पहले, क्या आप पहले से ही किया है ठीक है, तुम क्या करने को छोड़ दिया है क्या बातें की एक जोड़ी है:

• आपका तत्व NeonAnimationRunnerBehavior को लागू करना चाहिए उस पर एनिमेशन चलाने के लिए सक्षम होने के लिए स्थानीय डोम है
• एक बार जब यह व्यवहार को लागू करता है, तो आप animationConfig संपत्ति इतना है कि यह एनिमेशन यह चलेंगे है फिर से परिभाषित करना चाहिए और यह कैसे उन्हें
• अन्त में चलाया जाएगा, आप this.playAnimation('animationName') ताकि एनीमेशन चलाया जाता है बुलाना चाहिए जब आप इसे करने की जरूरत है रन

यहाँ कोड इस सब के बाद अंत में इस तरह दिखाई देंगे एनीमेशन आप परिभाषित का उपयोग कर परिवर्तन है:

Polymer({ 
     is: 'my-element', 
     behaviors: [ 
     Polymer.NeonAnimationRunnerBehavior 
     ], 
     properties: { 
     animationConfig: { 
      type: Object, 
      value: function(){ 
      return { 
       'expand': { 
       'name': 'grow-height-animation', 
       'node': this.$.container 
       } 
      }; 
      } 
     } 
     }, 
     _onTestClick: function() { 
     this.playAnimation('expand'); 
     } 
    }); 

और यहाँ सब कुछ

के working fiddle है