Vue进阶（02）过渡和动画

最新推荐文章于 2020-05-08 15:26:12 发布

stanwuc

最新推荐文章于 2020-05-08 15:26:12 发布

阅读量129

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/stanwuc/article/details/96999664

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中过渡和动画的使用，包括单元素/组件过渡的类名、CSS过渡和动画、自定义过渡类名、JavaScript钩子等。还涵盖了初始渲染过渡、多个元素和组件的过渡、列表过渡以及动态过渡。最后讨论了状态过渡和如何赋予设计以生命的动态状态过渡技巧。

摘要由CSDN通过智能技术生成

一、进入/离开 & 列表过渡

单元素/组件的过渡

先来一个小 demo

<div id="demo">
    <button @click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>

过渡的类名

enter 和 leave 分别代表进入和离开
v-enter-active 、v-leave-active代表的是进入和离开的过渡阶段
v-enter代表进入前的初始状态，v-enter-to代表完全进入后的结束状态，同理leave
v-enter-to、 v-leave-to是2.1.8版及以上才加入的

CSS 过渡

最前面的 demo 就是利用css来完成的过渡

CSS 动画

js 和 html 部分代码和上面的差不多，这里只看一下 css 部分的代码

.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);
  }
}

自定义过渡的类名

说明

可以通过以下特性来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

这些类名优先级高于普通类名，便于和和第三方 CSS 动画库结合使用

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 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>

<script>
    new Vue({
        el: '#example-3',
        data: {
            show: true
        }
    })
</script>

同时使用过渡和动画

显性的过渡持续时间

就是指定进入和离开过渡所用的时间

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

JavaScript 钩子

一个使用 Velocity.js 的简单例子

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

总结

除了例子中的还有这几个钩子：
before-enter、enter、after-enter、enter-cancelled、before-leave、leaveafter-leave、leave-cancelled
在 enter 和 leave 中必须使用 done 进行回调，否则不会产生过渡效果
添加 v-bind:css="false"，会跳过 CSS 的检测，可以避免过渡过程中 CSS 的影响

初始渲染的过渡

初始渲染直接在 transition 元素添加 appear 属性即可

<transition appear>
  <!-- ... -->
</transition>

自定义 css 类名

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

自定义 js 钩子

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>