问题描述：当给组件添加过渡效果时，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）,现在就更需要搞清楚这六个类名分别代表什么样的状态，本人还是建议将这个六个类名按照顺序分开来写。
转载请注明原文地址: https://ju.6miu.com/read-19774.html
