1

我下载了 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>，但这也没有隐藏元素。

4

1 回答 1

1

正如评论的那样，您只需要更改this.style.display = 'none';

于 2016-01-15T14:34:55.977 回答