search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.89k stars 33.69k forks source link

Transition behave different when writing enter and leave-active in a single rule? #4154

Closed reverland closed 7 years ago

reverland commented 7 years ago

Vue.js version

2.0.3

Reproduction Link

http://codepen.io/reverland/pen/ZBGKoW

Steps to reproduce

the left accordion behaves normally, however, when I write enter and leave-active in a single rule, it'll lost enter transition

What is Expected?

all left or right behaves the same

What is actually happening?

the right one just have leave transition

HerringtonDarkholme commented 7 years ago

This is an expected behavior.

According to the doc,

v-enter: removed after one frame. v-enter-active: removed when transition/animation finishes.

And these two classes are applied at the same time.

Your .collapse-useless-enter-active is defined after .collapse-useless-enter, and they are applied at the same time. So enter-active wins the css rule and max-height is kept as 800px from the begin to the end. No transition, of course.

Fixed: http://codepen.io/anon/pen/zovQpG