Полимерная неоновая анимация: элемент остается видимым после анимации

Question

Я скачал Polymer Starter Kit и пытаюсь анимировать элемент бумаги следующим образом

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

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