4.Vue过渡与动画 (2018.01.12)

1.我们只对CSS过渡与动画进行简单介绍，详细用法请参考官网文档。

 

2.单元素/组件的过渡：

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡：

1). 条件渲染 (使用 v-if)。

2). 条件展示 (使用 v-show)。

3). 动态组件。

4). 组件根节点。

案例：

<template>     <div>         <button v-on:click="show = !show"> 切换 </button>         <!--  transition 的 name 属性值 fade 将作为css样式的开头-->         <transition name="fade">             <p v-if="show">{{ message }}</p>         </transition>   </div> </template> <script>     export default {         name:"Hello",         data(){             return {                 show: true,                 message: 'Hello Vue!'             }         }     } </script> <style scoped> .fade-enter-active, .fade-leave-active {   transition: opacity .5s; } .fade-enter, .fade-leave-to{   opacity: 0; } </style>

注：记得要在 App.vue 里面调用该组件。

3.在进入/离开的过渡中，会有 6 个 class 切换：

类名	产生时间
v-enter	进入开始
v-enter-active	执行过程中
v-enter-to	结束动画
v-leave	离开开始
v-leave-active	离开过程中
v-leave-to	离开结束

注：其中"v"将替换为对应transition 的 name 属性值。

4.自定义过渡的类名：

使用自定义过渡的类名可以配合使用第三方 CSS 动画库来达到动画效果，如 Animate.css

1). 自定义过渡类名的属性：

属性	产生时间
enter-class	进入开始
enter-active-class	执行过程中
enter-to-class	结束动画
leave-class	离开开始
leave-active-class	离开过程
leave-to-class	离开结束

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

2). 案例：

<template>     <div>         <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">         <button @click="show = !show">切换</button>         <transition           name="custom-classes-transition"           enter-active-class="animated tada"           leave-active-class="animated bounceOutRight"         >           <p v-if="show">{{ message }}</p>         </transition>     </div> </template> <script>     export default {         name:"Hello",         data(){             return {                 show: true,                 message: 'Hello Vue!'             }         }     } </script> <style scoped> </style>

注：如果好多组件都用到了 Animate.css 的动画，可以将该文件的引入放到 index.html 中。

具体动画请参考Animate.css：https://daneden.github.io/animate.css/