Proste przejście CSS nie wykonuje

Question

Demo

<a href="#">hover</a> 
<p>Text here</p> 

chcę <p> zanikać i wsunąć gdy <a> się unosił. Problem polega na tym, że z CSS w wersji demo, <p> po prostu "wyskakuje" zamiast animować.

Answer 1

transition skrótowym nie obsługuje wiele właściwości w tym samym miejscu:

transition: max-height .5s ease, opacity .5s ease; 

You również potrzebujesz overflow: hidden, aby wyglądało na przesuwane. Updated demo

Answer 2

Trzeba przecinek indywidualne właściwości, które chcesz przejść:

p { 
    opacity: 0; 
    max-height: 0; 
    transition: max-height .5s ease, opacity .5s ease;  
} 

http://jsfiddle.net/pZngX/