javascript - 在隐藏和显示元素时添加微妙的动画 -CSS -JS

Question

当在我的元素中单击按钮时，我添加了一个隐藏类并删除了一个隐藏类。非常简单。但是，不是简单地隐藏元素并显示它们，有没有一种方法可以让它们快速推出和汇总？我还不是一个优秀的前端人员，这是我的 Javascript:

JS

$(document).on("click", _this.sel.close, function(event) {
  $(".update-billing").addClass("hidden");
  $(".billing-stats").removeClass("hidden");
  $(".current-cc").removeClass("hidden");
  event.preventDefault();
});

有哪些学习动画的好资源？

Answer 1

CSS 解决方案:

$(document).on("click", 'span', function(event) {
  $(".slider").toggleClass("hidden");
  event.preventDefault();
});

.slider {
  height: 200px;
  max-height: 500px;
  background-color: red;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.hidden {
  overflow-y: hidden;
  max-height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  Content
</div>
<span>Click me</span>

缺点:您必须使用固定高度的 div，并且您需要的每个浏览器都可能不支持它:compatibility

JS 解决方案:

$(document).on("click", 'span', function(event) {
  $(".slider").slideToggle();
  event.preventDefault();
});

.slider {
  height: 200px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  Content
</div>
<span>Click me</span>

引用

css transitions

.slideToggle()