为什么这个 CSS 过渡不起作用

Question

我有一个用于转换的元素上的代码：

#zlatest .zreader-toggle-fetch-inner {
  -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}

这匹配一个元素。在这个元素上，我在这些类之间切换，并希望看到平稳的过渡，但变化是立竿见影的：

.zReader-requested {
    height: 50px;
}
.zreader-received {
    height: auto;
}

我在这里做错了什么？

Answer 1

您尚未实现转换。您所做的是切换元素的类别，因此效果立即发生。

您需要做的是在发生某些事情时启动动画，而不仅仅是切换类。