Polymer неон-анимации: Элемент остается видимым после оживляющий

Question

Скачал Kit Polymer Starter и пытаюсь анимировать бумаги-элемент, как так

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

Проблема, с которой я столкнулся, заключается в том, что после переключения анимации мой бумажный элемент сжимается и остается видимым на экране. Как сделать его невидимым после анимации? Я пробовал hardcoding <paper-material hidden?=true>, но это также не скрывает элемент.

Answer 1

Как прокомментировал, вам просто нужно, чтобы изменить this.style.display = 'none';