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/