Vue transition展开收起动画

最近需要用到一个徐徐展开的动画，涉及到transition的使用。使用也蛮简单，想将动画应用到哪个元素上，像下面这样用把元素包起来就好了

    

        /**/
    

normal-expand对应的CSS代码：
.normal-expand-enter-active,
.normal-expand-leave-active{
    transition:all 1s ease;
    height: 368px !important;
}
.normal-expand-enter,
.normal-expand-leave-to {
    height: 0px !important;
}

但是我遇到一个问题，我这个adding-item是动态添加的，用户点击添加按钮就会添加一条，每一条有个移除按钮可以移掉。然后就发现刚添加进去的时候完全不播放，移除时倒是播的好好的（气死了）

理论上这个当前元素一定要设置v-if或v-show，但是新添加的不也是从无到有吗。。

只好试试万能的timeout大法了：

    

        /**/
    

created() {
    let vm = this
    setTimeout(function () {
        vm.visible = true
    }, 100)
},

这回可以顺利播放了。谁有更好的办法欢迎指出～

哇咔咔，我自己找到了，真是傻了吧，原来还有一个专门处理这种v-for的情况, visible都不用了，完美。就说嘛，总感觉上面那个方法土的很。。

    

        /**/
    

关于transition中涉及的6个class：

-enter：定义进入过渡的开始状态，在元素被插入前生效，在元素被插入后的下一帧移除

-enter-active: 定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
　　　　　　　　　　　　这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. -enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，
　　　　　　　　　　　　在过渡/动画完成之后移除。

离开时：
4. -leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。（瞬间被移除）
 
5. -leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
　　　　　　　　　　　　这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. -leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

上面的进入动画写成这样效果也一样
.normal-expand-enter-active{
    transition:all 1s ease;
    /*height: 368px !important;*/
}
.normal-expand-enter {
    height: 0px !important;
}
.normal-expand-enter-to {
    height: 368px !important;
}