Javascript - 反转模态动画答案

【问题标题】：Javascript - Reversing a Modal AnimationJavascript - 反转模态动画
【发布时间】：2016-10-28 13:08:16
【问题描述】：

我正在构建的网站上有几项 onclick 激活 modal like this。

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

【问题讨论】：

虽然我对您的代码的研究还不够多，不知道在哪里插入它，但 animation-direction: reverse; 可能会在这里为您提供帮助。
我建议你使用过渡而不是动画。定义隐藏和可见的 css 规则以在类名下工作，如“隐藏”并切换类名。要制作动画，请将 css 过渡属性设置为您正在更改的 css 属性。
@mikepa88 我想这就是我最终可能会做的事情。谢谢你们俩的帮助
使用过渡几乎总是更好。仅当您想通过几个步骤或自动重复使事情变得更复杂时，才需要动画。

标签： javascript css animation css-animations

【解决方案1】：

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

然后在按钮点击事件中：

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

关闭事件：

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

如果你需要纯 javascript，代码会多一点，但基本上就是这样

【讨论】：

【解决方案2】：

根据您构建代码的方式，您可以通过以下几种方式进行处理：

利用animation-direction: reverse; CSS 属性
使用支持操作 DOM 元素的 Javascript 框架（如 jQuery）（使用 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>

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

【讨论】：