动画元素在外观上平滑淡入，但在消失时立即隐藏

Question

我有一个元素 opacity: 0。

当某个选择器匹配时，我希望opcacity平滑过渡到1。

当该选择器不再匹配时，我希望 opacity 立即恢复为 0。

我该怎么做？

PS当然没有JS。

.the {
  display: inline-block;
  border: 1px solid deepskyblue;
  background-color: lightblue;
  padding: 2px 5px;
  border-radius: 4px;
  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  opacity: 0;
  pointer-events: none;
}

input:checked ~ .the {
  opacity: 1;
}

<label>
  <input type="checkbox">
  Show element
  
  <span class="the">
    I'm the element to animate!
  </span>
</label>

Answer 1

您可以将 transition 添加到 :checked 规则：

.the {
  display: inline-block;
  border: 1px solid deepskyblue;
  background-color: lightblue;
  padding: 2px 5px;
  border-radius: 4px;
  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  opacity: 0;
  pointer-events: none;
}

input:checked ~ .the {
  transition: opacity .5s;
  opacity: 1;
}

<label>
  <input type="checkbox">
  Show element
  
  <span class="the">
    I'm the element to animate!
  </span>
</label>

动画元素在外观上平滑淡入，但在消失时立即隐藏

Animate element with smooth fade-in on appearance, but instantly hide on disappearance

html

css

css-transitions

css-animations