聚合物霓虹灯动画：元素在动画后仍然可见

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

聚合物霓虹灯动画：元素在动画后仍然可见

Polymer neon-animation: Element is remains visible after animating

polymer-1.0

polymer-starter-kit