美文网首页前端常用技术点
vue transition一个元素实现类似轮播图切换的动画效果

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

作者: 赵小空 | 来源:发表于2019-09-30 16:52 被阅读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%);
}

相关文章

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

    使用 slidename 为变量 值为 slide-left || slide-rightjs中在隐藏时候执行...

  • Vue之transition

    Vue的transition实现动画效果 Vue 提供了 transition 的封装组件,可以给任何元素和组件添...

  • vue路由动画

    文章来源:Vue-router结合transition实现app动画切换效果实例分享

  • 前端系统学习 10. Vue高级用法

    Vue 高级用法 动画特效 transition 实现路由切换动画 App.vue Home -> List ->...

  • Android轮播图效果的各种实现

    前言 很多APP的首页通常会有一个带有动画切换的各种轮播图效果,刚好新项目中也要实现轮播图的效果,于是便研究了An...

  • 12.2使用animate.css

    使用过度类名,实现动画 第一步是将需要动画的元素包裹在transition元素中,transition元素时Vue...

  • vue 2.x实现动画效果

    vue 2.x开始,动画效果的实现都已经抽象成一个内建的组件了,transition 1. transition标...

  • js实现效果:循环轮播图

    效果简介 跟普通的左右切换轮播图类似,但是它看起来是首尾相连的。 注意:要想学习这种轮播图,首先要学会实现基本左右...

  • CSS Transition

    过渡 transition transition属性用于设置元素的过渡动画交互效果 transition是一个简写...

  • Vue动画

    Vue动画 Vue动画 CSS transition 在进入/离开的过渡中,会有 6 个 class 切换。 对于...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/rnhhpctx.html