vue transition一个元素实现类似轮播图切换的动画效果

使用

slidename 为变量 值为 slide-left || slide-right
js中在隐藏时候执行离场动画，在isshow为true时执行入场动画，即可一个元素实现切换动画效果

 <transition :name="slidename">
       <div class="right2" v-show="isshow">
                          
         </div>
  </transition>

css样式

.slide-left-enter {
    transform: translateX(-100%);
}

.slide-left-enter-active {
    transition: transform .2s;
}

.slide-left-enter-to {
    transform: translateX(0);
}

.slide-left-leave {
    transform: translateX(0);
}

.slide-left-leave-active {
    transition: transform .5s
}

.slide-left-leave-to {
    transform: translateX(-100%);
}



.slide-right-enter {
    transform: translateX(100%);
}

.slide-right-enter-active {
    transition: transform .2s;
}

.slide-right-enter-to {
    transform: translateX(0);
}

.slide-right-leave {
    transform: translateX(0);
}

.slide-right-leave-active {
    transition: transform .5s;
}

.slide-right-leave-to {
    transform: translateX(100%);
}