在vue中使用transition-group动画失效问题

在vue中使用transition-group包裹v-for时如果元素添加初始位置left值，left的动画效果就会消失。

CSS

        .swiper_main {
            width: 700px;
            height: 350px;
            position: relative;
            background-color: pink;
            z-index: 1;
        }
        
        .swiper_main .swiper_warp {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: green;
            z-index: 1;
            overflow: hidden;
        }
        
        .swiper_main .swiper_warp img {
            position: absolute;
            width: 100%;
            height: 100%;
            ** /* left: 200px; */ **    //此处属性若添加动画效果设置无效
            top: 0px;
            z-index: 1;
        }
        .move-enter-active,
        .move-leave-active {
            transition: left 2s;
        }
        
        .move-enter {
            left: 0px;
        }
        
        .move-enter-to {
            left: 200px;
        }

VUE

        <div class='swiper_main'>
            <div class='swiper_warp'>
                <transition-group name='move'>
                    <img :src='item.img' v-for='( item , index ) in slides' :key="'move'+index" v-show='item.isActive'> 
                </transition-group>
            </div>
            <div class='page'>
                <div @click='changeItem(index)' v-for='( item , index ) in slides' :key="index" :class={item:true,active:item.isActive}></div>
            </div>
        </div>

 

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 看下这篇博客，也许你就懂了，链接：vue使用transition-group实现列表动画 添加和删除

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^