聚合物霓虹燈動畫：元素是保持動畫

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