01#Vue Transition 过渡:基于 CSS 过渡
过渡的阶段
上图是过渡的 6 个阶段示意图。总体是进入和离开两个阶段,进入和离开又各自有两个阶段。下表格是对每一个阶段的解释:
进入和离开实现过渡效果使用的是 CSS 样式,过度的样式相当于重写覆盖了 Transistion 组件规定好的 6 个类名。
阶段 | 作用 |
---|---|
v-enter-from | 进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。 |
v-enter-active | 进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。 |
v-enter-to | 进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。 |
v-leave-from | 离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。 |
v-leave-active | 离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。 |
v-leave-to | 离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。 |
进入和离开
- 进入:进入就是组件(元素)渲染到页面上的过程就是进入阶段;
- 离开:离开就是组件已经被渲染到页面中,由于条件渲染(或切换路由组件或 v-show 是否显示等),这个组件从页面上消失的过程就是离开阶段。
结合上图和表格一起看,x-xx-active 代表着 x-xx-from 和 x-xx-to 之间的持续阶段。比如,组件(元素或标签)进入的阶段是 from 到 to 之间的持续阶段,即 v-enter-active。在这个阶段里,就是要对这个进入动画定义动画持续时间、延迟等。
离开阶段
<template>
<button @click="show = !show">Click</button>
<Transition>
<p v-if="show">Hello Vue!</p>
</Transition>
</template>
<style scoped>
.v-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.v-leave-from {
transform: translateX(0px);
opacity: 1;
}
.v-leave-to {
transform: translateX(100px);
opacity: 0;
}
</style>
<Transition>
内置组件中包裹了一个 p 标签。当我们点击按钮时,若 show 是 false,那么该标签从页面上消失,即离开阶段,也就是 v-leave-to、v-leave-from、v-leave-active。
进入阶段
p 标签从页面中渲染,即进入阶段,也就是 v-enter-to、v-enter-from、v-enter-active。
.v-enter-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.v-enter-from {
transform: translateX(100px);
opacity: 0;
}
.v-enter-to {
transform: translateX(0px);
opacity: 1;
}
完整的示例
重命名过渡
上面的所有案例都是 v-xx-xx,这个 v 是默认的过渡类名,给<Transition>
添加一个 name 属性,对过渡类名进行重命名,替换 v。直接看下面的源码就很轻松地理解了上一句话的意思:
rawProps 代表组件的属性(attribute),组件有 12 个属性。修改 name 就能替换掉默认的类名。修改第 4 ~ 12 个属性就能够完全自定义类名。但每一个对应的阶段所发生的动画效果不会有影响:
<Transition name="fade"></Transition>
.fade-enter-from {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
自定义过渡
如果只是对过渡组件添加一个属性 name,只能修改前缀名。如上一小节所述,后缀名也是可以修改的,而只需要在对应的过渡阶段上添加对应的属性(props)即可:
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用:
<Transition
name="custom-classes"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight">
<p v-if="show">Hello Vue!</p>
</Transition>
最新文章
- parted LVM划分4T磁盘,在线扩展1.5T
- java中是否会存在内存泄漏
- Java 毫秒转换为日期类型、日期转换为毫秒
- Python之路【第十一篇续】前端初识之CSS
- SIFT 特征提取算法总结
- [爬虫学习笔记]Url过滤模块UrlFilter
- C++基础内容复习
- 【转】CSS清除浮动_清除float浮动
- MySQL 库大小、表大小、索引大小查询命令
- 李洪强iOS开发之 - 实现九宫格并使用SDWebImage下载图片
- SqlServer 如何以脚本形式导出数据
- docker openvswitch网络方案
- 《C++ Primer》之面向对象编程(三)
- iOS---------- Safe Area Layout Guide before iOS 9.0
- python 9
- linux安装mysql后root无法登录 sql 无法登录
- Linux网络底层收发探究【转】
- 因mybatis逆向工程而产生的问题
- hdu 3864 D_num Pollard_rho算法和Miller_Rabin算法
- Css基础笔记(部分)