CSS3 淡入不淡出 - 单向过渡

Question

我只想用 css 为我的 html 制作动画。如果我添加一个 class 元素，列表应该淡入，但如果我删除 class.

，列表应该立即消失

我在 css3 中尝试了几种转换方式。但我似乎所有的转换都是针对元素的安装和卸载。

Answer 1

魔术是删除基本 class 中的转换并将其附加到 show class.

$("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>

CSS3 淡入不淡出 - 单向过渡

CSS3 fade in without fade out - one way transition

css

css-transforms