VueJS переход «введите» не работает

Question

Я пытаюсь сделать довольно простой сворачиваемый переход в меню. Мой элемент выглядит следующим образом:

<transition name="settings"> 
    <div v-show="!settingsCollapsed"> 
    </div> 
</transition> 

И мой CSS выглядит

.settings-enter { 
    max-height: 0px; 
} 
.settings-enter-active { 
    max-height: 200px; 
    transition: all 1s; 
} 
.settings-leave { 
    max-height: 200px; 
} 
.settings-leave-active { 
    max-height: 0; 
    transition: all 1s; 
} 

Мое меню скользит вверх правильно, но когда это скольжение вниз он не живой. Мне кажется, что .settings-enter никогда не применяется, и он просто прячется от скрытия до класса .settings-enter-active.

Любые предложения по исправлению этого вопроса или альтернативы для анимации сбрасываемого меню?

Answer 1

я, наконец, понял это! Секрет в том, чтобы добавить !important к enter класса:

.settings-controls { 
    overflow: hidden; 
    height: 100%; 
    max-height: 999px; 
    transition: all 1s; 
} 
.settings-enter { 
    max-height: 1px !important; 
    opacity: 0 !important; 
} 
.settings-enter-active { 
    max-height: 999px; 
    opacity: 1; 
    transition: all 1s; 
} 

Я не совсем уверен, почему это работает, потому что я довольно уверен, что класс переход должен быть перезаписаны стили базового класса, так что если кто-нибудь может объяснить, почему это работает, я был бы признателен.

Огромное спасибо @saurabh за то, что он помог мне!

Answer 2

Попробуйте эту скрипку: http://jsfiddle.net/25bqhk1h/

Вместо max-height, вы можете попробовать с height или min-height.

Здесь скрипку работы с min-height: jsfiddle

Хотя max-height не работает: jsfiddle