如何使用纯 JavaScript 显示和隐藏模式对话框？

Question

我有一个对话框，我想使用纯 JavaScript 显示/隐藏它。我使用了 modal.classList.add('hide');它隐藏了它，但随后整个屏幕冻结了我无法点击任何东西。隐藏和显示动画对于我正在构建的对话框来说是最重要的，这就是我采用这种方法的原因。这是我的模态对话框

 <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content" >
          <div class="modal-header">
            <a class="close button">

              <paper-button raied  type="button" class="close" id="close" aria-hidden="true" on-click="close">Close</paper-button>
            </a>
            <h2 class="modal-title">Title</h2>
          </div>
          <div class="modal-body next">
            <img class='modal-img' />
          </div>
          <div class="modal-footer">
            <paper-button raied id="previous" type="button" class="pull-left prev" on-click="prev">Previous</paper-button>
            <paper-button raied id="next" type="button" class="next" on-click="next">Next</paper-button>
          </div>
        </div>
      </div>
    </div>

这是关闭对话框和 CSS 的函数：

close: function() {
        var modal = Polymer.dom(this.root).querySelector(".modal");
        //modal.style.display = "none";
        modal.classList.add('hide');

      }

这是我的样式表：

<style>
@keyframes show {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
    }
    100% {
        display: block;
        opacity: 1;
    }
}
@keyframes hide {
    0% {
        display: block;
        opacity: 1;
    }
    99% {
        display: block;
    }
    100% {
        display: none;
        opacity: 0;
    }
}
.element, .element-css {
    animation: show 500ms linear;
    animation-fill-mode: forwards;
}
.hide{
    animation: hide 500ms linear;
    animation-fill-mode: forwards;
}
</style>

Answer 1

你可以试试这个

  Polymer({
    is: 'my-dialog',
    behaviors: [
    Polymer.NeonAnimationRunnerBehavior
    ],
    properties: {
        opened: {
        type: Boolean
    },
    animationConfig: {
        value: function() {
        return {
          'entry': {
            // provided by neon-animation/animations/scale-up-animation.html
            name: 'scale-up-animation',
            node: this
          },
          'exit': {
            // provided by neon-animation-animations/fade-out-animation.html
            name: 'fade-out-animation',
            node: this
          }
        }
      }
    }
  },
  listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
  },
  show: function() {
    this.opened = true;
    this.style.display = 'inline-block';
    // run scale-up-animation
    this.playAnimation('entry');
  },
  hide: function() {
    this.opened = false;
    // run fade-out-animation
    this.playAnimation('exit');
  },
  _onNeonAnimationFinish: function() {
    if (!this.opened) {
      this.style.display = 'none';
    }
  }
});

HTML

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content" >
      <div class="modal-header">
        <a class="close button">

          <paper-button raied  type="button" class="close" id="close" aria-hidden="true" on-click="close">Close</paper-button>
        </a>
        <h2 class="modal-title">Title</h2>
      </div>
      <div class="modal-body next">
        <img class='modal-img' />
      </div>
      <div class="modal-footer">
        <paper-button raied id="previous" type="button" class="pull-left prev" on-click="prev">Previous</paper-button>
        <paper-button raied id="next" type="button" class="next" on-click="next">Next</paper-button>
      </div>
    </div>
  </div>
</div>

你也可以看看jsfiddle link

Answer 2

在 100% 的隐藏关键帧中添加 visibility: hidden，在 0% 的位置添加 visibility: visible，因此显示关键帧。

希望有帮助