Vue2进阶篇-nextTick、过渡与动画

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

---

一、$nextTick介绍

1. 语法：this.$nextTick(回调函数)

2. 作用：在下一次 DOM 更新结束后执行其指定的回调。

3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

代码示例： 在点击编辑时光标聚焦到输入框内。

使用原因 *： 由于在handleEdit(todo)方法中修改了v-show判断值，通知Vue渲染了DOM，但Vue渲染时机是在整个方法执行完后再渲染，此时再在方法中写输入框的focus()方法是无效的，因为此时DOM还未渲染完毕，无法获取到输入框的DOM。

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"
				ref="inputTitle"
			>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
	</li>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'MyItem',
		//声明接收todo
		props:['todo'],
		methods: {
			......,
			//编辑
			handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					// console.log('@')
					this.$set(todo,'isEdit',true)
				}
				// 关键代码。
				this.$nextTick(() => {
					this.$refs.inputTitle.focus()
				})
			},
			//失去焦点回调（真正执行修改逻辑）
			handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
		},
	}
</script>

二、Vue中的过渡与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：
   

3. 写法：

   1. 准备好样式：

      • 元素进入的样式：

        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点

      • 元素离开的样式：

        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

      • 代码示例

         <template>
         	<div>
         		<button @click="isShow = !isShow">显示/隐藏</button>
         		<transition-group name="hello" appear>
         			<h1 v-show="!isShow" key="1">你好啊！</h1>
         			<h1 v-show="isShow" key="2">尚硅谷！</h1>
         		</transition-group>
         	</div>
         </template>
         
         <script>
         	export default {
         		name:'Test',
         		data() {
         			return {
         				isShow:true
         			}
         		},
         	}
         </script>
         
         <style scoped>
         	h1{
         		background-color: orange;
         	}
         	/* 进入的起点、离开的终点 */
         	.hello-enter,.hello-leave-to{
         		transform: translateX(-100%);
         	}
         	/* 动画全程 */
         	.hello-enter-active,.hello-leave-active{
         		transition: 0.5s linear;
         	}
         	/* 进入的终点、离开的起点 */
         	.hello-enter-to,.hello-leave{
         		transform: translateX(0);
         	}
         </style>
      

   2. 使用<transition>包裹要过度的元素，并配置name属性：

      <transition name="hello">
          <h1 v-show="isShow">你好啊！</h1>
      </transition>
      

      使用animate插件，动画名通过官方给出的案例进行复制。

      	<template>
      		<div>
      			<button @click="isShow = !isShow">显示/隐藏</button>
      			<transition-group 
      				appear
      				name="animate__animated animate__bounce" 
      				enter-active-class="animate__swing"
      				leave-active-class="animate__backOutUp"
      			>
      				<h1 v-show="!isShow" key="1">你好啊！</h1>
      				<h1 v-show="isShow" key="2">Vue2.0！</h1>
      			</transition-group>
      		</div>
      	</template>
      

   3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

      	<transition-group name="hello" appear>
      		<h1 v-show="!isShow" key="1">你好啊！</h1>
      		<h1 v-show="isShow" key="2">Vue2.0！</h1>
      	</transition-group>
      

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通