Polymer - Hoạt hình một DIV

Question

Tôi đang học Polymer. Tôi có một yếu tố bao gồm div. Tôi muốn làm sống động chiều cao của div đó. Trong một nỗ lực để làm điều này, tôi đã có những điều sau đây:

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> 

sau đó tôi đã sử dụng hình ảnh động chiều cao nuôi hiện here để tìm cảm hứng. Vì vậy, tôi về cơ bản, có một hình ảnh động được định nghĩa như thế này:

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

thách thức của tôi là, tôi không hiểu làm thế nào để tích hợp hình ảnh động này với các yếu tố div với id của "container". Mọi thứ tôi thấy có vẻ như nó chỉ hoạt động trên các nguyên tố Polymer. Tuy nhiên, tôi đang cố gắng tìm ra cách để animate các div bằng cách sử dụng Polymer. Tôi đang thiếu gì?

Cảm ơn!

Answer 1

Trang phần tử polymer có guide on animations mát mẻ, nhưng tôi đoán bạn đã đọc và nó không trả lời câu hỏi của bạn, nếu đúng như vậy, điều này sẽ hữu ích.

Trước hết, những gì bạn đã đã làm là ok, những gì bạn đã để lại để làm là một vài điều:

• yếu tố bạn nên thực hiện các NeonAnimationRunnerBehavior để có thể chạy các hình ảnh động trên nó DOM địa phương
• Một khi nó thực hiện hành vi, bạn nên xác định lại animationConfig tài sản để nó có các hình ảnh động nó sẽ chạy và làm thế nào nó sẽ chạy chúng
• Cuối cùng, bạn nên gọi this.playAnimation('animationName') để các hình ảnh động được chạy khi bạn cần nó chạy

Dưới đây là cách mã sẽ trông vào cuối sau khi tất cả những thay đổi này bằng cách sử dụng hình ảnh động bạn định nghĩa:

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

Và đây là một working fiddle của tất cả mọi thứ