Question

来自https://stackoverflow.com/a/9334132/3779853：让我们假设一个基本元素可以通过编程方式进行切换。这可能意味着将显示设置为无/阻止或完全删除/插入元素。

$('#toggle').click(() => $('#square').toggle());

#square {
  width: 50px;
  height: 50px;
  background: lightblue;
}
.animated {
  animation: fade-in 1s;
}
@keyframes fade-in {
    from { opacity: 0; }
      to { opacity: 1; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="toggle">toggle</button>
<div id="square" class="animated"></div>

使用简单的animation，您可以为元素出现的时间添加过渡效果。当元素消失时，您该怎么做？

我不想添加其他类，没有:hover，也没有更多的Java代码。在许多JS框架中，您可以轻松显示/隐藏元素：.toggle()（如上所述的JQuery），ng-if（AngularJS），*ngIf（Angular），条件渲染（React），{ {1}}（VueJS）等。通过上述解决方案，一个简单的v-if就足以使其与自定义动画一起出现。因此，假设这是一个标准问题，我正在这里寻找用于淡出动画的纯CSS解决方案。

Answer 1

您可以将不透明度属性与过渡效果一起使用。

$('#toggle').click(() => $('#square').toggleClass('animated'));

#square {
  width: 50px;
  height: 50px;
  background: lightblue;
  transition: opacity 0.5s;
  opacity: 1;
}
#square.animated {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="toggle">toggle</button>
<div id="square" class="animated"></div>

Answer 2

这是100％纯的CSS溶液。

#square {
	width: 50px;
	height: 50px;
	background: lightblue;
	transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition:opacity 1s ease-in-out;
}
#myBox:checked ~ .animated {
  opacity: 0;
}
#myBox ~ .animated {
   opacity: 1;
}

<input type="checkbox" id="myBox" style="display:none;"/>
<button id="toggle"><label for="myBox">toggle</label></button>
<div id="square" class="animated"></div>

在纯CSS中淡出动画

2 个答案: