隐藏元素并显示它们时添加一个微妙的动画-CSS -JS

Question

我在项目中单击按钮时添加隐藏类并删除隐藏类。非常直截了当。但是，有没有一种方法可以让它们快速推出和汇总，而不是简单地隐藏元素并显示它们？我不是一个伟大的前端人YET，这是我的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()