当前位置 主页 > 网站技术 > 代码类 >

    Vue过渡效果之CSS过渡详解(结合transition,animation,animate.cs

    栏目:代码类 时间:2020-02-05 21:08

    以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示

    <div >
     <button v-on:click="show = !show">Toggle</button>
     <p v-if="show">蓝色理想</p>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>

    如果要为此加入过渡效果,则需要使用过渡组件transition 

    过渡组件

    Vue提供了transition的封装组件,下面代码中,该过渡组件的名称为'fade'

     <transition name="fade">
      <p v-if="show">蓝色理想</p>
     </transition>

    当插入或删除包含在transition组件中的元素时,Vue会自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名 

    过渡类名

    总共有6个(CSS)类名在enter/leave的过渡中切换

    v-enter

    定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除

    v-enter-active

    定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数

    v-enter-to

    定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时 v-enter 被删除),在  transition 或 animation 完成之后移除

    v-leave

    定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除

    v-leave-active

    定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数

    v-leave-to

    定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时 v-leave 被删除),在 transition 或 animation 完成之后移除

    对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀,表示过渡组件的名称。比如,如果使用 <transition name="my-transition"> ,则 v-enter替换为 my-transition-enter

    transition

    常用的Vue过渡效果都是使用CSS过渡transition,下面增加一个enter时透明度变化,leave时位移变化的效果

    <style>
    .fade-enter{
     opacity:0;
    }
    .fade-enter-active{
     transition:opacity .5s;
    }
    .fade-leave-active{
     transition:transform .5s;
    }
    .fade-leave-to{
     transform:translateX(10px);
    }
    </style>
    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition name="fade">
      <p v-if="show">蓝色理想</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>

    animation

    CSS动画animation用法同CSS过渡transition,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除

    下面例子中,在元素enter和leave时都增加缩放scale效果

    <style>
    .bounce-enter-active{
     animation:bounce-in .5s;
    }
    .bounce-leave-active{
     animation:bounce-in .5s reverse;
    }
    @keyframes bounce-in{
     0%{transform:scale(0);}
     50%{transform:scale(1.5);}
     100%{transform:scale(1);}
    }
    </style>
    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition name="bounce">
      <p v-if="show">蓝色理想</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>