Question

我正在构建onclick激活this question的网站上有一些项目。

现在动画是单向的，当你关闭动画或从模态的焦点点击时，动画就会消失。从我一直在阅读的内容来看，人们似乎使用fadeIn / slideIn动画进行一次性效果，但是有可能反转动画，而不是仅仅将显示更改为无，它会滑回吗？

Answer 1

#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}

然后在按钮点击事件：

$("#modal").addClass("hidden")

关闭事件：

$("#modal").removeClass("hidden")

如果你需要纯粹的javascript，那将是更多的代码，但基本上就是

Answer 2

根据您的代码结构，您可以通过以下几种方式解决此问题：

使用animation-direction: reverse; CSS属性
使用Javascript框架（如jQuery）来启用DOM元素的操作（使用jQuery，您可以执行以下操作：$('element').slideIn();来显示模态，$('element').slideOut();来隐藏模态。
使用CSS类并使用Javascript应用/取消应用它们（我推荐的选项，并在下面给出了一个示例）：

$(document).ready(function() {
  $('.open').on('click', function(e) {
    e.preventDefault();

    if ($('.modal').hasClass('hide')) {
      $('.modal').removeClass('hide');
    }
    $('.modal').addClass('show');
  });

  $('.close').on('click', function(e) {
    e.preventDefault();

    $('.modal').addClass('hide');

    if ($('.modal').hasClass('show')) {
      $('.modal').removeClass('show');
    }
  });
});

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  left: -305px;
  z-index: 999;
  transition: all 0.3s ease;
  background: #ffffff;
  border: 1px solid blue;
}
.modal.show {
  left: 150px;
}
.modal.hide {
  left: -305px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Click <a href="#" class="open">here</a> to open modal</p>

<div class="modal">
  <p>This is a modal window.</p>
  <p>Click <a href="#" class="close">here</a> to close</p>
</div>

请注意，此示例仅用于说明概念验证 - 您需要自己整理：）

Javascript - 扭转模态动画

2 个答案: