css - CSS3 淡入不淡出 - 一种方式过渡

Question

我只想用 css 为我的 html 设置动画。如果我为元素添加一个类，列表应该淡入，但如果我删除该类，它应该立即消失。

我在 css3 中尝试了几件事。但我似乎所有的转换都适用于一个元素的安装和卸载。

标签： csscss-transforms

Answer 1

魔术技巧是删除基本类中的转换并将其附加到show类中。

$("button").on("click", function(){
  $("#container").toggleClass("show")
})

#container {
  color: white;
  background: #357700;
  opacity: 0;
  overflow: hidden;
  transition: none;
}

#container.show {
  opacity: 1;
  transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide</button>

<div id="container">
  <p>Hello World</p>
</div>