javascript - 如何使 CSS 缓慢过渡到 opacity = 1，并快速/立即过渡到 opacity = 0？

Question

.item {
  opacity: 0;
  transition: opacity 6s;
}

我正在使用 JS 将不透明度设置为 0 到 1，反之亦然。

CSS 中是否有一种方法可以使不透明度从 0-1 过渡持续 6 秒，但从 1-0 过渡持续 0 秒？

我想我可以在 JS 中设置过渡属性，但是有没有办法用 CSS 产生这种行为？

Answer 1

在您要设置不同不透明度的两个不同类中使用过渡属性。

.itemHidden {
  opacity: 0;
  transition: opacity 6s;
}

.itemShown {
  opacity: 1;
  transition: opacity 0s;
}