聚合物霓虹灯动画：元素是保持动画

Question

后可见我下载了聚合物入门套件，我试图如下动画的纸元素，像这样

 <section data-route="contact"> 
      <button on-click="_onButtonClick">Toggle</button> 
      <my-dialog> 
      <paper-material elevation="1"> 
       <h2 class="page-title">Contact</h2> 
       <p>This is the contact section</p> 
      </paper-material> 
      </my-dialog> 
     </section> 

我-dialog.html：

<dom-module id="my-dialog"> 

    <template> 

    <content></content> 

    </template> 
</dom-module> 

<script> 

Polymer({ 

is: 'my-dialog', 

behaviors: [ 
    Polymer.NeonAnimationRunnerBehavior 
], 

properties: { 

    opened: { 
    type: Boolean 
    }, 

    animationConfig: { 
    type: Object, 
    value: function() { 
     return { 
     'entry': [{ 
      name: 'slide-left-animation', 
      node: this 
     }], 
     'exit': [{ 
      name: 'fade-out-animation', 
      node: this 
     }] 
     } 
    } 
    } 

}, 

listeners: { 
    'neon-animation-finish': '_onAnimationFinish' 
}, 

_onAnimationFinish: function() { 
    if (!this.opened) { 
    this.style.display = ''; 
    } 
}, 

show: function() { 
    this.opened = true; 
    this.style.display = 'inline-block'; 
    this.playAnimation('entry'); 
}, 

hide: function() { 
    this.opened = false; 
    this.playAnimation('exit'); 
} 

    }); 

</script> 

我面临的问题是，在切换动画之后，我的纸张元素被压扁并在屏幕上保持可见状态。如何在动画之后使其不可见？我试过硬编码<paper-material hidden?=true>但这也不能隐藏元素。

Answer 1

至于评论，你只需要改变this.style.display = 'none';