последовательный переход css - PullRequest
Новая
       6

последовательный переход css

0 голосов
/ 05 марта 2012

Я просматриваю сеть уже более суток и до сих пор не могу найти работающего решения следующей проблемы.

  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, если это невозможно, как сделать это по-другому.Но это не летает.Кто-нибудь хорошая идея или опыт с этим?

1 Ответ

1 голос
/ 05 марта 2012

Переход может работать, только если ваши начальные значения и конечные значения различаются.

Поскольку ваши начальные и конечные значения не различаются ( «вы исходите из ничего и никуда не идете» (всегда смотрите на светлую сторону жизни) ) это невозможно в одном CSS класс.

Что возможно возможно, так это то, что у вас есть два класса, скажем appear и disappear, и переключение между ними через определенное время с помощью javascript (setTimeout function)

...