Vue3和Vue2组件单元素的过渡
第一部分:Vue3中transition组件搭配过渡
开发中,我们往往想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验
Vue中为我们提供一些内置组件和API来完成动画,利用它们我们可以方便的实现过渡动画效果
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter-from
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to
:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter-from
被移除),在过渡/动画完成之后移除。
v-leave-from
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to
:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave-from
被移除),在过渡/动画完成之后移除。
代码案例: 如果我们希望给单元素或者组件实现过渡动画,可以使用 transition
内
置组件来完成动画
如果我们使用的是一个没有name的transition,那么所有的class是以 v- 作为默认前缀
如果我们添加了一个name属性,比如 <transition name="slide-fade"></transition>
那么所有的class会以 slide-fade 开头
<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><transition name="slide-fade"><router-view/></transition>
</template><style lang="less">
/* 可以为进入和离开动画设置不同的持续时间和动画函数 */
.slide-fade-enter-active {transition: all 1.3s ease-out;
}.slide-fade-leave-active {transition: all 1.8s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter-from,
.slide-fade-leave-to {// transform: translateX(20px);opacity: 0;
}
</style>
transition组件的原理
当Vue插入或删除包含在 transition 组件中的元素时会做以下处理:
- 自动嗅探目标元素是否应用了CSS过渡或者动画,如果有,那么在恰当的时机添加/删除 CSS类名
- 如果 transition 组件提供了JavaScript钩子函数,这些钩子函数将在恰当的时机被调用
- 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画,DOM插入、删除操作将会立即执行
第二种:transition组件搭配动画
<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><transition name="bounce"><router-view/></transition>
</template><style lang="less">
.bounce-enter-active {animation: bounce-in 0.5s;
}
.bounce-leave-active {animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);}
}
</style>
第二部分:Vue2单元素、组件的过渡
作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
过渡的类名
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to
:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。
v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to
:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
使用<transition>
包裹要过渡的元素,并配置name属性:
<template><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition>
</div>
</template>
<script>
// vue2项目懒得创建,使用vue3项目代替
import { ref } from 'vue'
export default {setup () {const show = ref(true)return { show }}
}
</script>
<style lang="less" >.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;
}
</style>
Vue3和Vue2组件单元素的过渡相关推荐
- Vant-UI 表单组件(Field组件):验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
- 表单组件 form fastadmin(生成表单元素)
Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...
- react中使用非受控组件获取表单元素的值
class Hello extends React.Component{constructor(){super() 利用react提供的React.createRef()this.ref=React. ...
- 在 Vue3 成为默认版本后,盘点了 Vue3 与 Vue2 的区别
目录 前言 正文 一.Vue3 与 Vue2 区别概览 二.Vue3 与 Vue2 区别详述 生命周期 多根节点 Composition API 异步组件(Suspense) Teleport 响应式 ...
- Vue3 10多种组件通讯方法
本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了 单文件组件 <script setup> . 众所周知,Vue.js 中一 ...
- vue3内置组件(Teleport组件,Fragment组件)-传送组件,减少层级
一.传送组件(Teleport组件) 可将组件移动到 DOM 中 Vue app 之外的其他位置,主要是为了解决一些特殊场景下模态对话框组件.组件的渲染. 例子:模拟UI框架对话框组件. App.vu ...
- vue3相比vue2效率提升在哪些方面?
vue3相比vue2效率提升在哪些方面? 静态提升 预字符串化 缓存事件处理函数 Block Tree PatchFlag 静态提升 相比vue2,vue3对以下静态节点进行提升: 元素节点 没有绑定 ...
- Vue3+ Vue-cli (2) 组件篇
目录 一.全局组件定义和复用性讲解 二.Vue3中的局部组件 三.父子组件的静态和动态传值 四.组件传值时的校验操作 五.组件中重要机制 - 单项数据流 六.Non-props使用技巧 七.组件中通过 ...
- vue3.2、vue3和vue2不同之处
缩写记忆: tv code2&tf spa tv code2: 其中d是0.object.defineproperty=> proxy 1.diff算法优化(添加标记,增量diff).2 ...
- Vue3和Vue2的区别
目录 前言 概览 一.新特性 二.差异 详情 一.vue3新特性 1.组合式API---setup 2.ref创建响应式数据 3.Teleport---"传送门" 4.多根节点 5 ...
最新文章
- 如何理解遗传算法中的编码与解码?以二进制编码为例
- Careercup - Microsoft面试题 - 5428361417457664
- mysql8.0.11创建用户报错_mysql8.0.11修改root密码,其他创建用户和删除用户
- lubridate | 日期类型数据的转换
- “BASH: FORK: RESOURCE TEMPORARILY UNAVAILABLE”的解决方案
- C++ 事件驱动型银行排队模拟
- 【转】SVN ——开放源代码的版本控制系统
- mysql java 社工库_社工库源码 汇总 持续更新
- vue 前端使用 element-ui 实现省市级联动
- 测试实践:华为测试流程总结
- 中国教育资助网“益行天下”大型公益学子资助活动启动
- samba之修改密码
- 小程序js判断是否为图片
- 什么才是软件定义汽车?
- 数据压缩作业二——分析tga文件
- JAVA查询结果按照对象返回结果
- Unity C# 中国天气网城市代码 获取当前天气、各种指数方法
- Java全栈知识体系
- ArrayList 遍历ArrayList的3种方法,和删除的两种方法
- [ php ] php中io操作!
热门文章
- Selenium面试问题及答案30题版
- Python学习笔记(01 Hello World的条件输出 02 数值运算)
- 计算机怎么设置定时音乐,怎么让电脑自动开机播放音乐教程 以及自动关机计划任务设置...
- android 平板键盘布局,android 4.1 平板连接USB键盘,默认键盘布局
- html前端简单页面,web前端制作一个简单的登录页面
- css中“~”(波浪号)、“,”(逗号)、 “ + ”(加号)和 “ ”(大于号)是什么意思?
- ubuntu如何杀进程_ubuntu kill进程
- 机器人理论简介—— 台湾交通大学机器人学公开课(一)
- 如何使用安卓+qq邮箱+腾讯企业邮箱发送邮件
- 动态规划_数字的划分