1. 单节点的过渡

1.1 应用场景

Vue 提供了标签为 transition 的 内置组件，在：

元素或组件初始渲染时；
元素或组件显示/ 隐藏时(使用v-if 或早show 进行条件渲染时)；
元素或组件切换时。

我们可以给任何元素和组件添加进入/ 离开时的过渡动画。

1.2 定义过渡效果的方式

Vue 允许用户使用 CSS 和 JS 两种方式来定义过渡效果。

使用 CSS 过渡：需预置符合Vue 规则的带样式的类名（用于定义过渡不同阶段时的样式:）

类名	说明
v-enter	定义进入过渡的开始状态。在元素被插入前生效，被插入后的下一帧移除。
v-enter-active	定义进入过渡生效时的状态o 在整个进入过渡阶段中应用，在元素被插入之前生效，在过渡/ 动画完成之后移除。这个类可以用来定义进入过渡的过程时间、延迟和曲线函数等。
v-enter-to	( Vue 2. l. 8 及以上版本)定义进入过渡结束时的状态。在元素被插入后的下一帧生效(此时v-enter 被移除) ，在过渡/ 动画完成之后移除。
v-leave	:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active	定义离开过渡生效时的状态o 在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/ 动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数。
v-leave-to	( Vue 2.1.8 版及以上版本)定义离开过渡的结束状态o 在离开过渡被触发之后下一帧生效(此时机leave 被移除)，在过渡/ 动画完成之后移除。

当实例中存在多个不同的动画效果时，我们可以使用自定义前缀替v-，比如使用 slide-enter 替换 v-enter ，不过这需要赋予transition元素name属性。

name(类型为string）：用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 “v”

过渡执行的各种阶段和作用，举例示意如下：

迸出过渡时（ transition ）效果如下：

使用 css 中的 animation 或第三方动画库 Animate.css

<!-- 引入动画库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><!-- animated标识要执行动画的元素， bounce标识所要执行的动画效果， 此处为弹簧效果 -->
<h1 class="animated bounce">弹簧动效</h1>

由于这些动画库有着不同的类名规则，无法与Vue 默认的类名规则配合使用，因此Vue 为其提供了兼容方案，允许用户自定义过渡的类名，这些类名的优先级将高于默认的类名。

自定义过渡类名

我们可以使用以下特性来自定义过渡类名：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class

leave-to-class

【案例效果】：

—— 由于动画模式设置不够准确，两者的运行结果略有差异。

【案例代码】：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--引入 Animate.css 动画库--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><!-- 引入 Vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>div {width: 380px;height: 130px;margin: 100px auto;padding-left: 50px;border: 1px solid blueviolet;color: blueviolet;font-size: 24px;line-height: 130px;text-align: left;}.inline-block {display: inline-block;}.rotate-enter-active {animation: selfRotateIn 500ms;}.rotate-leave-active {animation: selfRotateOut 500ms;}/*命名避免与Animate.css 冲突*/            @keyframes selfRotateln {0% {opacity: 0;transform: rotateZ(-180deg)}100% {opacity: 1;transform: rotateZ(0deg)}}@keyframes selfRotateOut {0% {opacity: 1;transform: rotateZ(0deg)}100% {opacity: 0;transform: rotateZ(-180deg)}}</style>
</head><body><div id="app"><button @click="isHidden =!isHidden">{{isHidden ? '点击显示':'点击隐藏'}}</button><!-- 自定义动画 --><transition name="rotate"><span class="inline-block" v-if="!isHidden">自定义动画</span></transition><!-- animate.css 动画 --><transition name="custom" enter-active-class="animated rotateIn" leave-active-class="animated rotateOut"><span class="inline-block" v-if="!isHidden"> animate.css </span></transition></div><script>var vm = new Vue({el: '#app',data() {return {isHidden: true,}}})</script>
</body></html>

在开发中，使用进入过渡便可实现初始渲染时的过渡效果。除此之外，Vue 提供了专门的初始渲染过渡，这需要在transition元素上添加appear属性。

注意：appear过渡只支持自定义类名的过渡和JS 过渡，用法如下：

<transìtìonappear appear-class="custom-appear-class"appear-to-class="custom-appear-to-class"appear-active-class="custom-appear-active-class"
><!--... ...-->
</transition>

当需要显示 / 隐藏多个相邻的相同标签的元素时，需要赋予元素唯一 key 值，让Vue对元素进行跟踪。

当元素key 值发生变化时，Vue 不会复用原有的元素，而将重建新元素。根据这一特点，就可以通过改变元素的 key 值来触发过渡动画，这常被用在元素切换时。

Vue 过渡效果的组件相关推荐

vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
Vue基于ElementUI组件实现滑块登录验证组件
引言在实际项目应用开发中,为了防止用户频繁发起登录请求,导致后端登录访问压力瞬时过大,我们可以设计一些验证规则防刷,最常见的方式是通过输入验证码的方式降低刷新频率,后台通过返回不同的验证码从而降低用 ...
Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
Vue.js子组件向父组件通信
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
vue与react组件的思考
前言我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活,vue是一种死板的感觉.为什么有这种感觉呢,react有一种很强烈的欲望, ...
vue 循环递归组件_全局组件实现递归树，避免循环引用
概述目录分类展示会通常要用到树形结构.本例结合vue的父子组件,采用递归渲染,实现一个基于树的curd小demo 知识点父子组件递归渲染 class 样式对象写法,CSS伪元素 ::before ...

Vue 过渡效果的组件

目录

1. 单节点的过渡

1.1 应用场景

1.2 定义过渡效果的方式

Vue 过渡效果的组件相关推荐

最新文章

热门文章