Vue3动画及源码剖析
2021/11/12 22:09:52
本文主要是介绍Vue3动画及源码剖析,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue3动画及源码剖析
1、Vue如何实现动画
在Vue中主要是通过Vue提供的内置组件<transition></transition>
组件来显示动画。
2、使用
1.包裹单个元素或者组件
<template> <div> <button @click="isShow = !isShow">toggle</button> <transition name="ydkd"> <h1 v-if="isShow">Content</h1> </transition> </div> </template> <script setup> import { ref } from '@vue/reactivity'; const isShow = ref(true) </script> <style scoped> .ydkd-enter-from, .ydkd-leave-to { opacity: 0; } .ydkd-enter-to, .ydkd-leave-from { opacity: 1; } .ydkd-enter-active, .ydkd-leave-active { transition: all 2s ease; } </style>
2.包裹多个元素或者组件
<template> <div class="container"> <div> <button @click="isShow = !isShow">toggle</button> </div> <transition name="ydkd" mode="out-in" :appear="true"> <h1 class="tip" v-if="isShow">Hello transition</h1> <h1 class="tip" v-else>Hello YDKD</h1> </transition> </div> </template> <script setup> import { ref } from '@vue/reactivity'; const isShow = ref(true); </script> <style scoped> .container { margin: 0 auto; text-align: center; } .tip { display: inline-block; } .ydkd-enter-active { animation: bounce 2s ease; } .ydkd-leave-active { animation: bounce 2s ease reverse; } @keyframes bounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style>
细节:
- 在多个组件切换时,会遇到两个组件同时显示,可以给
<transition mode="out-in"></transition>
设置mode属性,值有两个。- out-in 先消失当前的,再引入后续的.
- in-out 先进入后续的,再消失当前的.
- 在页面初始时用户可能就像看见动画,可以给
<transition :appear="true"></transition>
,即默认开启动画,appear的属性值默认为false.- 其实 appear 属性就是元素的 [name]-enter-active 的属性值。可以在源码解析中看到。
3、过渡动画的class
v-enter-from -> v-enter-to 从隐藏到显示
v-leave-to <- v-leave-from 从显示到隐藏
v-enter-active <-> v-leave-active 从元素显示到隐藏 / 从隐藏到显示 的过渡动画效果
图解
4、实现原理
当Vue进行模板编译时,发现被<transition></transition>
包裹的元素时,Vue会进行一下处理
- 1、自动嗅探目标元素是否应用了CSS过渡或者动画,如果有,那么在恰当的时机添加/删除 CSS类名
- 2、如果 transition 组件提供了JavaScript钩子函数,这些钩子函数将在恰当的时机被调用;
- 3、.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画,DOM插入、删除操作将会立即执行
5、源码解析
1、persisted属性为true,标明为<transition></transition>
代表着当前不会进行 insert/remove元素,会在render层进行跳过。
2、在针对<transition name="ydkd"></transition>
,如果没有设置name,则在源码中会取v。
const { name = 'v', type, duration, enterFromClass = `${name}-enter-from`, enterActiveClass = `${name}-enter-active`, enterToClass = `${name}-enter-to`, appearFromClass = enterFromClass, appearActiveClass = enterActiveClass, appearToClass = enterToClass, leaveFromClass = `${name}-leave-from`, leaveActiveClass = `${name}-leave-active`, leaveToClass = `${name}-leave-to` } = rawProps
3、<transition></transition>
组件包含了许多的钩子函数,判断元素的显示与隐藏时,例如实现原理的第一点,在恰当的时机添加/删除 CSS类名。在源码中会使用到以下函数。
// 添加类名 export function addTransitionClass(el: Element, cls: string) { cls.split(/\s+/).forEach(c => c && el.classList.add(c)) ;( (el as ElementWithTransition)._vtc || ((el as ElementWithTransition)._vtc = new Set()) ).add(cls) } // 移除类名 export function removeTransitionClass(el: Element, cls: string) { cls.split(/\s+/).forEach(c => c && el.classList.remove(c)) const { _vtc } = el as ElementWithTransition if (_vtc) { _vtc.delete(cls) if (!_vtc!.size) { ;(el as ElementWithTransition)._vtc = undefined } } }
这篇关于Vue3动画及源码剖析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南