Question

我只想用CSS为HTML制作动画。如果我在元素上添加一个类，则列表会淡出，但如果删除该类，则列表应立即消失。

我尝试了一些在CSS3中进行过渡的方法。但是我似乎所有过渡都针对元素的安装和卸载。

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>

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

1 个答案: