ポリマー - DIVのアニメーション

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

、私は「コンテナ」のidを持つdiv要素で、このアニメーションを統合する方法を理解していない

：だから、私は基本的には、次のように定義されたアニメーションを持っています。私はそれがポリマーの要素だけで動作するように見えるすべてのようです。しかし、ポリマーを使用して divをアニメーション化する方法を理解しようとしています。私は何が欠けていますか？

ありがとう！

Answer 1

ポリマーの要素のページは、涼しいguide on animationsですが、私はあなたがすでにそれを読んでいると思うし、あなたの質問にはあまり答えていないと思います。

まず第一に、あなたがすでに行っていることはOKですが、何をやって残っていることは物事のカップルです：

• あなたの要素がNeonAnimationRunnerBehaviorは、それがローカルDOMだ上でアニメーションを実行できるように実装する必要があります
• それが動作を実装するとアニメーションが実行されるように、あなたがそれを必要とするとき、それはアニメーションは、それが実行され、それがどのように
• 最後にそれらを実行します、あなたはthis.playAnimation('animationName')を呼び出す必要がありましたように、あなたはanimationConfigプロパティを再定義する必要があります実行
ここ

は、すべてこれはあなたが定義されたアニメーションを使用して変更後のコードは最終的にどのように見えるかです：

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です