css - css 串行转换

Question

我现在在网上浏览了一天多，仍然找不到以下问题的有效解决方案。

1. 一个 div 应该从无到有从下向上增长到 100%
2. 文本应该淡入
3. 然后超时
4. 那么文本应该淡出
5. 然后 div 应该向 div 的底部收缩并消失。

---

.max{
  max-height:100%;height:100%;color:#fff;
  -moz-transition-property:max-height,height, color;
  -moz-transition-duration:3s,3s,1s;
  -moz-transition-delay:0s,0s,2s;
 }
.min{
  max-height:0%;height:0%;color:transparent;
  -moz-transition-property:max-height,height, color;
  -moz-transition-duration:3s,3s,1s;
  -moz-transition-delay:1s,1s,0s;
 }

---

如何将 max 和 min 序列化为一个 CssClass 如果不可能，如何以另一种方式进行。但这不会飞。有人对此有一个好主意或经验吗？

Answer 1

仅当您的起始值和结束值不同时，转换才能起作用。

因为你的起始值和结束值没有区别（“你从一无所有，你一无所有”（总是看着生活的光明面））在一个 CSS 类中是不可能的。

可能的可能是你有两个类说appear，disappear并在一定时间后使用javascript（setTimeout函数）在它们之间切换