在纯 CSS 中淡出动画

Question

来自/sf/answers/653389271/：让我们假设一个以编程方式切换的基本元素。这可能意味着将显示设置为无/阻止或完全删除/插入元素。

$('#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，也没有更多的 Javascript 代码。在许多 JS 框架中，您可以轻松地显示/隐藏元素：.toggle()（JQuery，同上）、ng-if（AngularJS）、*ngIf（Angular）、条件渲染（React）、v-if（VueJS）等等。使用上述解决方案，一个简单的class="animated"就足以让它与自定义动画一起出现。所以我在这里寻找淡出动画的纯 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>