Vue中transition的使用

---

theme: channing-cyan

highlight: monokai

一、transition的认识

1、transition是内置组件

内置组件可以直接在模板中使用，而不需注册。

、 、 和 组件都可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。如果你需要直接访问它们，也可以将它们显性导入。

官网文档：https://v3.cn.vuejs.org/api/built-in-components.html#transition

2、transition原理

1)自动嗅探目标元素是否应用了CSS过渡或者动画，如果有 那么在恰当的时机添加/删除 CSS类名；

2)如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；

3)如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行。

二、transition 的name属性

1、过渡动画

注：① v 代表name里面定义的类名；

​ ② enter代表的都是进入时的状态；

​ ③ leave是离开。

1)v-enter-from：定义进入过渡的开始状态。在元素被插入DOM之前生效，在元素被插入DOM之后的下一帧移除。

2)v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动 画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

注：一般在v-enter-active里面写transition属性。

3)v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/ 动画完成之后移除。

4)v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5)v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在 过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6)v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在 过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

vue动画过渡文档：https://v3.cn.vuejs.org/guide/transitions-overview.html

2、CSS 过渡

```javascript

显示 / 隐藏

---

transition 的使用一

```

3、同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

实现一个放大加渐变的效果：

```javascript

显示 / 隐藏

---

transition 的使用一

```

4、显示的指定动画时间

5、过渡的模式mode

注：实现两个元素之间来回切换的时候，使用过渡的模式。

1)in-out：新元素先进行过渡，完成之后当前元素过渡离开

2)out-in：当前元素先进行过渡，完成之后新元素过渡进入

3)案例

```javascript

显示 / 隐藏

---

条件一

条件二

```

6、appear初次渲染

三、自定义过渡class

enter-from-class

enter-active-class

enter-to-class

leave-from-class

leave-active-class

leave-to-class

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

https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1-class-%E7%B1%BB%E5%90%8D

四、JavaScript钩子

https://v3.cn.vuejs.org/guide/transitions-enterleave.html#javascript-%E9%92%A9%E5%AD%90

```vue

gsap的使用

显示 / 隐藏

---

gsap的使用

```

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter和 leave 钩中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成

添加 :css="false"，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。

五、animate.css的使用

地址：https://animate.style

Animate.css是一个随时可用的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。

1、安装

```bash npm install animate.css --save

or

yarn add animate.css ```

2、导入

注：在main.js中导入。

jade import 'animate.css';

3、使用

1)通过name属性的使用

```javascript 显示 / 隐藏

---

transition 的使用一

```

2)自定义类名的使用

```javascript 显示 / 隐藏

---

transition 的使用一

```

六、gsap

地址：https://greensock.com/

通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的。

1、安装

bash npm install gsap

2、使用

```javascript

gsap的使用

显示 / 隐藏

---

gsap的使用

```

3、实现一个递增的计算器

```javascript

gsap实现数字变化

{{ showNum }}

{{ show.toFixed(0) }}

```

七、列表过渡

文档：https://v3.cn.vuejs.org/guide/transitions-list.html

1、移动动画

```javascript 添加 删除 数字洗牌

<transition-group tag="p" name="box">
    <span v-for="(index,item) in numbers" :key="index">
        {{item}}
    </span>
</transition-group>

```

2、搜索框列表展示的动画

1)css实现

```javascript

{{ item }}

```

2)js的实现

```javascript

{{ item }}

```