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 }}
```