前端常用技术点

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

2019-09-30  本文已影响0人  赵小空

使用

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%);
}
上一篇 下一篇

猜你喜欢

热点阅读