Vue中过度动画效果应用

2022-11-29 15:26:45

一、实现动画过渡效果的几种方式

实现动画必须要将要进行动画的元素利用<transition>标签进行包裹

1、利用CSS样式实现过渡效果

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除

（1）通过name的名称进行重命名，在样式文件中进行.fade-enter-active设置动画的效果即transition属性，需要注意的是动画结束后样式将会移除，所以如果想要动画实现之后元素保持有某个样式，则需要transition标签里面的元素的样式表中进行设置，此情况是针对需要通过改变元素的属性来显示元素，如定位top，left以及通过transform将显示的元素的位置改变从而让元素出现在当前的视图窗口中时，但是如果元素v-show为true之后元素已经在视图*显示了，不需要位置的移动将元素移动到视图中，只是想要显示的时候显示有动画效果的，则直接将动画结束的属性设置在v-enter-active/v-leave-active中即可。也就是说动画的属性如果只是产生效果，不对元素的任何属性进行修改，也就是动画中的属性样式不需要永久添加到dom元素中，则直接按后者的方式定义，如果说动画的属性同时相对元素进行样式设计，属性样式需要被添加到dom元素上，则需要按照前者的方式。

<transition name="fold">

        <div class="shopcart-list" v-show="listShow">

          <div class="list-header">

            <h1 class="title">购物车</h1>

            <span class="empty" @click="empty">清空</span>

          </div>

          <div class="list-content" ref="list">

            <ul>

              <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0">

                <span class="name">{{selectName[index]}}</span>

                <div class="price">

                  <span>￥{{food.price*food.count}}</span>

                </div>

                <div class="cartcontrol-wrapper">

                  <v-cartcontrol :food="food"></v-cartcontrol>

                </div>

              </li>

            </ul>

          </div>

        </div>

      </transition>

 .fold-enter-active,.fold-leave-active

      transition:all 0.5s

    .fold-enter,.fold-leave

      transform :translate3d(0,0,0)

    .shopcart-list

      position:absolute

      transform:translate3d(0,-100%,0)//动画结束后的效果需要在此处进行设置，设置在.fold-enter-active中，元素动画结束后该样式属性会被移除掉，将会看不到想要的效果

      top: 100%//元素即使显示也不再视图窗口中，通过transform实现显示

      z-index:-1

      width:100%

（2）如果要设置元素出现和隐藏的动画效果不一样则可以分别设置样式

HTML

 <transition name="bounce">

   <div v-show="showFlag" class="food"><div>

 </transition>

CSS

.bounce-enter-active

    transition:all 0.4s linear

    transform:translate3d(0,0,0)

  .bounce-enter

    transform :translate3d(100%,0,0)

  .bounce-leave-active

    transition:all 0.4s linear

    transform:translate3d(100%,0,0)

  .bounce-leave

    transform:translate3d(0,0,0)

利用动画animation也可以实现上面的效果

.bounce-enter-active

    animation :bounceIn 0.4s linear

    @keyframes bounceIn{

      0%{

        transform :translate3d(100%,0,0)

      }

       50%{

         transform :translate3d(50%,0,0)

       }

         100%{

           transform :translate3d(0,0,0)

         }

    }

  .bounce-leave-active

    animation :bounceOut 0.4s linear

    @keyframes bounceOut{

      0%{

        transform :translate3d(0,0,0)

      }

       50%{

         transform :translate3d(50%,0,0)

       }

         100%{

           transform :translate3d(100%,0,0)

         }

    }

2、利用animation或者是动画库实现动画效果

<div id="example-2">

  <button @click="show = !show">Toggle show</button>

  <transition name="bounce">

    <p v-if="show">Look at me!</p>

  </transition>

</div>

new Vue({

  el: '#example-2',

  data: {

    show: true

  }

})

.bounce-enter-active {

  animation: bounce-in 0.5s linear;//leave和enter的动画效果不一样

}

.bounce-leave-active {

  animation: bounce-out 0.5s linear;

}

@keyframes bounce-in {

  0% {

    transform: scale(0);

  }

  50% {

    transform: scale(1.5);

  }

  100% {

    transform: scale(1);

  }

}

@keyframes bounce-out {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.5);

  }

  100% {

    transform: scale(0);

  }

}

3、自定义过度类名

enter-class
enter-active-class
enter-to-class (>= 2.1.8 only)
leave-class
leave-active-class
leave-to-class (>= 2.1.8 only)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">

<div id="example-3">

  <button @click="show = !show">

    Toggle render

  </button>

  <transition

    name="custom-classes-transition"

    enter-active-class="animated tada"

    leave-active-class="animated bounceOutRight"

  >

    <p v-if="show">hello</p>

  </transition>

</div>

new Vue({

  el: '#example-3',

  data: {

    show: true

  }

})

可以在样式中同时使用transition和animation

4、利用JavaScript钩子函数实现过渡效果

<transition

  v-on:before-enter="beforeEnter"

  v-on:enter="enter"

  v-on:after-enter="afterEnter"

  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"

  v-on:leave="leave"

  v-on:after-leave="afterLeave"

  v-on:leave-cancelled="leaveCancelled"

>

  <!-- ... -->

</transition>

methods: {

  // --------

  // 进入中

  // --------

  beforeEnter: function (el) {

    // ...

  },

  // 此回调函数是可选项的设置

  // 与 CSS 结合时使用

  enter: function (el, done) {

    // ...

    done()

  },

  afterEnter: function (el) {

    // ...

  },

  enterCancelled: function (el) {

    // ...

  },

  // --------

  // 离开时

  // --------

  beforeLeave: function (el) {

    // ...

  },

  // 此回调函数是可选项的设置

  // 与 CSS 结合时使用

  leave: function (el, done) {

    // ...

    done()

  },

  afterLeave: function (el) {

    // ...

  },

  // leaveCancelled 只用于 v-show 中

  leaveCancelled: function (el) {

    // ...

  }

}

在使用钩子函数实现动画的时候注意dom的异步刷新，需要结合this.$nextTick()，同时在leave和enter中设置样式前最好迫使dom进行回流（reflow）使dom重新渲染，如获取元素的offsetHeight等，然后在this.$nextTick（）中设置新的样式，不然有可能实现不了动画的效果.

若想了解组件间的通信机制，可以看我的下一篇博客http://www.cnblogs.com/heshan1992/p/6905452.html

码农公寓

相关文章