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>

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

即可

聚合物霓虹灯动画：动画制作后

1 个答案: