在Polymer中动画子元素

Question

是否可以为子元素设置动画，而不将它们包装在具有Polymer.NeonAnimatableBehavior的自定义元素中？将每个可动画元素包装为自定义元素似乎有点过分。

Answer 1

You can useneon-animatable

is a simple container element implementing Polymer.NeonAnimatableBehavior. This is a convenience element for use with <neon-animated-pages>.

 <neon-animated-pages selected="0"
                 entry-animation="slide-from-right-animation"
                 exit-animation="slide-left-animation">
  <neon-animatable>1</neon-animatable>
  <neon-animatable>2</neon-animatable>
 </neon-animated-pages>

Answer 2

您可以使用node属性为自定义元素内的元素设置动画 animationConfig对象。它会像

一样

<div id="placeholder"></div>
<script>
 //rest of the code
 properties:{
  animationConfig:{
   value:function(){
    return {'entry':[{
     name: '<name of the animation>',
     node: this.$.placeholder
    }]}

placeholder是要设置动画的元素。您可以查看this neon-animation示例以获取完整代码。