在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>
不知道你这个问题是否已经解决, 如果还没有解决的话: