Vue之过渡transition

﹏ヽ暗。殇╰゛Y 2023-06-11 15:30 10阅读 0赞

## 前言 ##

*  Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
    
     *  在 CSS 过渡和动画中自动应用 class–基础动画
     *  可以配合使用第三方 CSS 动画库，如 Animate.css–CSS动画
     *  在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画
     *  可以配合使用第三方 JavaScript 动画库，如 Velocity.js—JS动画库
 *  Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
    
     *  条件编译 (使用 v-if)
     *  条件渲染 (使用 v-show)
     *  动态组件component
     *  组件根节点

## 过渡的类名 ##

*  在进入/离开的过渡中，会有 6 个 class 切换：
 *  v-enter（插入）类：
    
     *  ①v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
     *  ②v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
     *  ③v-enter-to: 2.1.8版及以上，定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时  
        v-enter被移除)，最后在过渡/动画完成之后与v-enter-active一起移除。
 *  在进入/离开的过渡中，会有 6 个 class 切换：
    
     *  v-enter（插入）类原理—动画流程概念图  
        ![在这里插入图片描述][20191031140311335.png]
 *  v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除
 *  在进入/离开的过渡中，会有 6 个 class 切换：
 *  v-enter（插入）类原理—动画流程概念图  
    ![在这里插入图片描述][20191031140349147.png]
 *  v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除
 *  **v-leave（移除）类：**
    
     *  ①v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
     *  ②v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
     *  ③v-leave-to: 2.1.8版及以上，定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，最后在过渡/动画完成之后与v-leave-active一起移除。
 *  v-leave（移除）类原理—动画流程概念图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  同理：**第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)**
 *  **过渡概念图**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]

## 过渡标签 ##

*  过渡标签：  
    Vue中如果想要给某个元素添加过渡效果或动画，需要给该元素外部使用`<transition></transition>`标签进行包裹。
 *  版本更迭：  
    Vue1.0中transition做为标签的行内属性被vue支持。但在Vue2.0中。Vue放弃了旧属性的支持并提供了transition组件，transition做为标签被使用。

## 过渡名 ##

*  对于这些在过渡中切换的类名来说分两种，一种是没有name名字，另一种是有name（推荐）
 *  ①如果使用一个没有名字的 `<transition>`，则 v- 是这些类名的默认前缀
 *  ②如果使用了 `<transition name="my-transition">，`那么 v-enter 会替换为  
    my-transition-enter。
 *  推荐：因为一个页面里，会存在多个过渡，所以通常给过渡中切换的类名加上名字name

## 过渡名-没有名字 ##

*  （1）没有名字的 `<transition>`  
    隐藏案例（点击按钮，实现过渡隐藏）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  过渡原理分析
 *  过渡时长具体大小由v-leave-active决定  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  分析概念图可以得知v-leave-active贯穿了整个过渡，所以整体时长可以由其决定。

## 过渡名-有名字 ##

*  （2）带名字的：如果想实现两种过渡，即所耗时间不同，没有名字的 `<transition>`无法分开设置。此时便需要transition添加name  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]

## 单元素过渡-移除 ##

*  首先看个典型案例
 *  点击按钮实现隐藏的过渡（即display由block→none）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  点击后查看代码，分析进程

（fadeout-leave）→（fadeout-leave-active）→（fadeout-leave-to）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]

## 单元素过渡原理 ##

*  原理分析：
 *  当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
 *  ①自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
 *  ②如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当时机被调用。
 *  ③如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

## 单元素过渡-插入 ##

*  接下来做个显示过渡  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]
 *  将两者结合下，做个显隐切换过渡  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]  
    **vue之transition过渡代码如下：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>demo</title>
    		<style type="text/css">
    			.demo {
    				width: 200px;
    				height: 200px;
    				background: red;
    			}
    
    			.demo1 {
    				width: 200px;
    				height: 200px;
    				background: green;
    			}
    
    			.one-enter,
    			.one-leave-to {
    				opacity: 0;
    			}
    
    			.one-enter-active,
    			.one-leave-active {
    				transition: opacity 5s;
    			}
    
    			.one-enter-to,
    			.one-leave {
    				opacity: 1;
    			}
    
    			.two-enter,
    			.two-leave-to {
    				opacity: 0;
    			}
    
    			.two-enter-active,
    			.two-leave-active {
    				transition: opacity 2s;
    			}
    
    			.two-enter-to,
    			.two-leave {
    				opacity: 1;
    			}
    		</style>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="root">
    			<transition name="one">
    				<div class="demo" v-show="status"></div>
    			</transition>
    			<transition name="two">
    				<div class="demo1" v-show="status"></div>
    			</transition>
    			<button @click="handleClick">toggle</button>
    		</div>
    		<script type="text/javascript">
    			var root = new Vue({
    				el: '#root',
    				data: {
    					status: false
    				},
    				methods: {
    					handleClick() {
    						this.status = !this.status;
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

## 完毕，有问题留言小编… ##

[20191031140311335.png]: /images/20230531/5583f3d8e3ae4d06aa37ef5050279e91.png
[20191031140349147.png]: /images/20230531/9ef7a138b99a4455a005d349cf214716.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/459ea17847954522b518c78d9a849dc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/44ab2e914ec74851a6ab562604ac3cfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/53613a487ec544b3b96d68e965da3c6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/65c65fb8364341f681d567db231e4dff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/b33fe50260604686b085fcfaef9c6d83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/3fbc9c3530de46c0bc5cfd82fdd71a32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/c6545b9ccea245d7af1a0109dc15f306.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/33cc0a2d02a24223957035cb92ae3a9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230531/eb3f3cabc44a425dbae16c88715cd4db.png