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 ...
最新文章
- PHP向第三方接口发送json数据
- 30个极大提高开发效率的Visual Studio Code插件
- linux 分区克隆软件 partclone 简介
- DataGrid 完全攻略之二（把数据导出到Excel）
- 读书笔记_代码大全2第七章_高质量的子程序
- Apache Maven 使用 profile 和 filtering 实现多种环境下的资源配置管理
- 我的青春谁做主的经典语录
- 【java】 ssm+ssh原生态框架（仅供参考）
- Java核心类库篇7——多线程
- python同时注释多行代码_python怎么同时对多行代码进行注释
- Java算法之寻找旋转数组中的最小值
- 《R语言机器学习：实用案例分析》——1.3节使用函数
- pandas.DataFrame及xgboost代码示例
- 联想小新潮5000 完美黑苹果 EFI文件
- DM7 达梦 数据库 数据守护(Data Watch) -- 实时主备环境搭建
- C#使用LitJson解析JSON
- Youtube更改视频原始语言
- 使用新浪API生成短连接
- 加盟店 -- 祖坟刨干记
- Android实现仿QQ登录可编辑下拉菜单