首页 > 其他 > 详细

动画 VUE基础回顾8

时间:2019-11-25 00:52:34      阅读:77      评论:0      收藏:0      [点我收藏+]

过渡和动画

  使用<transition> 组件包裹

  例:  <transition name="fade">

        <div v-if="true">过渡动画</div>

      </transition>

  style:.fade-enter-active, .fade-leave-active {transition: opactiy .5s}

     .fade-enter, .fade-leave-to{opacity:0;}

  以上切换v-if的状态能够让div元素渐显渐隐,而不是直接添加删除

  原理是VUE通过tansition组件的name属性值,然后使用它在过渡的各个节点为包含的元素添加类名。当元素被添加到文档或者从文档中移除时,会分别应用enter和leave两类过渡。以下是会添加的类名:

    {name}-enter(常用):这个类名会在元素被插入DOM时加入,然后在下一帧立刻移除。可以使用它来设置那些需要在元素开始进入过渡时移除的CSS属性。

    {name}-enter-active(常用): 在元素整个动画阶段应用。和-enter 同时被添加,然后在动画完成时被移除。适用于设置css过渡时间长度,过渡的属性和使用的曲线函数。

    {name}-enter-to: 这个类名会在-enter类名从元素移除的同时添加到元素上,适合用来设置那些在元素开始进入过渡时添加的css属性,通常在-enter类上设置与之相反的过渡属性好些

    {name}-leave:在离开过渡中,在离开过渡时被添加,下一帧被移除。

    {name}-leave-active(常用): 在离开过渡中,用于离开过渡的整个阶段。

    {name}-leave-to(常用): 在离开过渡被触发之后下一帧生效,在完成过渡之后被移除

 js过渡动画

   <transition>还提供用于实现的js动画钩子,这些钩子函数和用于css的过渡的类名类似。

   beforeEnter:进入动画前开始触发,适合设置初始值

   enter:这个钩子会在进入动画开始被触发,可以在这里运行动画。可以使用done回调来标明动画已经完成

   afterEnter:动画执行完成时被触发

   enterCancelled:进入动画被取消时触发

   beforeLeave:这个钩子等同于进入动画的beforeEnter钩子,会在离开动画开始前被调用

   leave:对于离开动画而言等同于进入enter 钩子,可以在这里进入动画

   afterLeave:会在离开动画执行完成时被触发

   leaveCancelled:在离开动画被取消时触发

  这些钩子会以时间的形式在transiton组件上触发

   例:

<transition 
  v-on:before-enter="test1"
  v-on:enter="test2"
  v-on:leave="test3"
>         <div v-if="true">过渡动画</div> </transition>
 //script
  methods:{
  test1(el){
    el.style.opacity = 0;
},
  test2(el){
    TweenLite.to(el,0.6,{opacity:1,onComplete:done});
},
  test3(el){
    TweenLite.to(el,0.6,{opacity:0,onComplete:done});
}

  使用js动画可以创建比使用css过渡复杂的多的动画效果,包括多步动画,或每次显示不同的过渡效果等,但css的性能更好,所在一般能用css实现就使用css。

动画 VUE基础回顾8

原文:https://www.cnblogs.com/shcs/p/11925129.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!