Question

点击Task后，我想切换淡出div的内容，再次点击该元素时再次淡出。现在，内容应该只有一个淡出的延迟 - 因此不会在淡出时。

我已经有了vanilla JavaScript来添加和删除各自的类，但我想用CSS完成动画。那么，如何仅使用纯CSS来完成呢？

Answer 1

您可以根据需要使用CSS transitions淡入/淡出。

.fade-in {
    /* the "1s" is the duration of the animation.
    The "0.25s" is the delay before the animation starts. */
    transition: color 1s linear 0.25s;
    color: rgba(0, 0, 0, 1);
}
.fade-out {
    transition: color 1s;
    color: rgba(0, 0, 0, 0);
}

Answer 2

您可以在CSS Transitions使用css过渡来了解它们。我会选择不透明度，所以将你的divs内容设置为不透明度为0然后当添加类时给它一个不透明度为1然后你可以在过渡属性中设置持续时间，如下所示：

var div = document.querySelector('div');
div.addEventListener("click", function(){
	this.classList.toggle("content-shown");
});

div{
  height:50px;
  background:blue;
  color:white;
  height:50px;
  background:blue;
}
p{
  opacity:0;
  transition: opacity 1s ease-in-out;
}
div.content-shown p{
  opacity:1;
}

<div>
  <p>Here is the divs content</p>
</div>

Answer 3

如果没有JavaScript，可以使用<input type="checkbox">和连接的<label>。你应该只为初始状态编写CSS，然后单击＆＃34;点击＆＃34;状态。

＆＃13;

input {
  display: none;
}

input:checked+label {
  color: transparent;
  transition: 500ms 500ms;
}

label {
  align-items: center;
  background: yellow;
  display: flex;
  height: 100px;
  justify-content: center;
  transition: none;
  width: 100px;
}

＆＃13;

<input type="checkbox" id="toggle">
<label for="toggle">Toggle me</label>

＆＃13;

纯CSS - 仅延迟延迟（不淡出）

3 个答案: