Vue transition展开收起动画

transition的使用，想将动画应用到哪个元素上，像下面这样用<transition></transition>把元素包起来就好了

<transition name="normal-expand">
    <div class="adding-item" v-show="true">
        /**/
    </div>
</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大法了：

<transition name="normal-expand">
    <div class="sr-manage-relation-adding-item" v-show="visible">
        /**/
    </div>
</transition>

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

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

关于transition中涉及的6个class：

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

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

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

离开时：
4. <name名>-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。（瞬间被移除）

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

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

来源：CSDN

作者：lilybaobei

链接：https://blog.csdn.net/lilybaobei/article/details/104220458

标签

transition

动画

vue