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

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

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

    在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)

    下面的代码意味着元素在进入enter和离开leave时,持续时间都为1s,而无论在样式中它们的设置值为多少

    <transition :duration="1000">...</transition>

    也可以分别定制进入和移出的持续时间

    <transition :duration="{ enter: 500, leave: 800 }">...</transition>

    比如,下面的代码中,进入和移出的效果都为animate.css里面的shake效果,但持续时间分别是0.5s和1s

    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake">
      <p v-if="show">小火柴的蓝色理想</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>

    过渡条件

    一般地,在Vue中满足下列任意一个过渡条件,即可添加过渡效果

    条件渲染(使用v-if)

    常见的条件是使用条件渲染,使用v-if

    <style>
    .fade-enter,.fade-leave-to{
     opacity:0;
    }
    .fade-enter-active,.fade-leave-active{
     transition:opacity 1s;
    }
    </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>

    条件展示(使用v-show)

    使用条件展示,即使用v-show时,也可以添加过渡效果

    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition name="fade">
      <p v-show="show">蓝色理想</p>
     </transition>
    </div>

    动态组件

    使用is属性实现的动态组件,可以添加过渡效果

    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition name="fade">
      <component :is="view"></component>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     components:{
      'home':{template:'<div>蓝色理想</div>'}
     },
     data: {
      show: true,
     },
     computed:{
      view(){
       return this.show ? 'home' : '';
      }
     }
    })

    更多关于Vue动画效果的文章请点击下面的相关链接