在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>

用包含变量x的一个表达式实现：x>0时结果为1，x=0结果为0，不要条件判断

rabbito_o

22个回复