Polymer - Animieren eines DIV

Question

Ich lerne Polymer. Ich habe ein Element, das eine div enthält. Ich möchte die Höhe dieses Div animieren. In einem Versuch, dies zu tun, habe ich folgendes bekam:

my-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> 

habe ich dann die Höhe wachsen Animation here für Inspiration gezeigt. Also, ich habe im Grunde eine Animation wie folgt definiert:

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; 
    } 
}); 

Meine Herausforderung ist, ich verstehe nicht, wie diese Animation mit dem mit der ID von „Containern“ div Elemente zu integrieren. Alles, was ich sehe, scheint nur auf Polymer-Elementen zu funktionieren. Aber ich versuche herauszufinden, wie man die div mit Polymer zu animieren. Was vermisse ich?

Danke!

Answer 1

Die Polymerelemente Seite hat eine coole guide on animations, aber ich schätze, Sie haben es bereits gelesen und es hat nicht ganz Ihre Frage beantwortet, wenn das der Fall ist, sollte dies hilfreich sein.

Zunächst einmal, was Sie bereits getan haben, in Ordnung ist, was Sie zu tun haben, ist ein paar Dinge:

• Ihr Element der NeonAnimationRunnerBehavior implementieren sollten in der Lage sein Animationen auf es lokale DOM laufen
• Sobald es das Verhalten implementiert, sollten Sie die animationConfig Eigenschaft neu zu definieren, so dass es die Animationen hat läuft es und wie es ihnen
• Schließlich laufen, sollten Sie this.playAnimation('animationName') so nennen, dass die Animation ausgeführt wird, wenn Sie es brauchen Führen Sie

Hier ist, wie der Code am Ende schließlich aussehen würde die Animation ändert sich mit Ihnen definiert:

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'); 
     } 
    }); 

Und hier ist ein working fiddle alles