在VUE中遇到了一个过渡问题

问题描述：当给组件添加过渡效果时，opacity可以正常enter/leave，但是height只有enter的时候有效果，leave的时候height直接变成了0，没有过渡效果。

贴出代码：

.fadeStyle-enter-active, .fadeStyle-leave-active{

transition:all 1s ease;

}

.fadeStyle-enter,.fadeStyle-leave-active{

height:0;

opacity:0;

}

按照官网的教程，自然而然的把 .fadeStyle-enter-active, .fadeStyle-leave-active放在了一起，后来发现.fadeStyle-enter-active,.fadeStyle-leave-active并不能直接放在一块，里面一些属性是不一样的，所以分开写，并把.fadeStyle-enter,.fadeStyle-leave-active也分开来写，这样过程更清晰,并且将height换成了max-height,并且需要把带transition的代码放在所有过渡代码的最前面。

贴出代码：

.fadeStyle-enter-active{

transition:all .5s ease;

height:100px;

}

.fadeStyle-leave-active{

transition:all .5s ease;

height:0;

opacity: 0;

}

.fadeStyle-leave{

opacity: 1;

height:100px;

}

.fadeStyle-enter{

opacity:0;

height: 0;

}

在发布了2.1.8版本之后，又添加了两个过渡类名（v-enter-to, v-leave-to）,现在就更需要搞清楚这六个类名分别代表什么样的状态，本人还是建议将这个六个类名按照顺序分开来写。