Оживляющего элемент свойство с переходами

Question

JSFiddle

Im пытается оживить мои всплывающее меню.

У меня есть это на закадровым уль элемента:

top: 40px; //hidden off bottom of page 
-webkit-transition: all .8s ease; 
-moz-transition: all .8s ease; 
-ms-transition: all .8s ease; 
-o-transition: all .8s ease; 
transition: all .8s ease; 

И по наведению I:

bottom: 40px; 
top: auto; 

Но это не анимировать - почему?

Answer 1

Потому что ваше свойство bottom не инициализировано в классе.

Изменить этот

#filter >ul >li >ul{ 
position: absolute; 
top: 40px; 
... 

К этому

#filter >ul >li >ul{ 
position: absolute; 
top: 40px; 
bottom: 0; 
... 

Fiddle Here

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

---

Как OP сказал, это нарушает его хотел анимацию (Althought вопрос почему код не анимировать)

top и bottom два противоположных свойства и, в анимацию хотите, вы должны рассмотреть вопрос об объединении. Like this one

Просто удалите top и установите bottom значение по умолчанию для низкого отрицательного значения, а затем анимировать в bottom: 0 при наведении курсора мыши.

Мне лично это не нравится, но оно работает. Вы должны обратить внимание на это значение по умолчанию: если вы добавите в свое меню больше <li>, вам придется рассчитать это снова.