【猛地学】Vue的$nextTick、过渡与动画＜transition＞

$nextTick

$nextTick(回调函数)可以将回调延迟到下次 DOM 更新循环之后执行

使用$nextTick例子：优化Todo-List：在点击编辑后迅速让输入框获取焦点

			handleEdit(todo){
                // 如果todo自身有isEdit属性就将isEdit改成true
				if(Object.prototype.hasOwnProperty.call(todo,'isEdit')){
					todo.isEdit = true
				}else{
                    // 如果没有就向todo中添加一个响应式的isEdit属性并设为true
					this.$set(todo,'isEdit',true)
				}
                // 当Vue重新编译模板之后执行$nextTick()中的回调函数
                this.$nextTick(function(){
                    // 使input框获取焦点
                    this.$refs.inputTitle.focus()
                })
			},

过渡与动画

介绍

Vue封装的过渡与动画：

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

写法：

元素进入的样式：

v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点

元素离开的样式：

v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
使用包裹要过度的元素，并配置name属性：

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

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

代码例子：

src/App.vue:

<template>
    <div id="root">
        <MyAnimation/>
        <MyTransition/>
        <MyTransitionGroup/>
        <ThirdPartAnimation/>
    </div>
</template>

<script>
    import MyAnimation from './components/MyAnimation.vue'
    import MyTransition from './components/MyTransition.vue'
    import MyTransitionGroup from './components/MyTransitionGroup.vue'
    import ThirdPartAnimation from './components/ThirdPartAnimation.vue'

    export default {
        name:'App',
        components: { MyAnimation,MyTransition,MyTransitionGroup,ThirdPartAnimation },
    }
</script>

src/components/MyAnimation:

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="jojo" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
export default {
    name:'MyTitle',
	data() {
		return {
			isShow:true
		}
	}
}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.jojo-enter-active{
		animation: jojo 0.5s linear;
	}

	.jojo-leave-active{
		animation: jojo 0.5s linear reverse;
	}

	@keyframes jojo {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

src/components/MyTransition.vue:

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="jojo" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
export default {
    name:'MyTitle',
	data() {
		return {
			isShow:true
		}
	}
}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.jojo-enter,.jojo-leave-to{
		transform: translateX(-100%);
	}

	.jojo-enter-to,.jojo-leave{
		transform: translateX(0);
	}

	.jojo-enter-active,.jojo-leave-active{
		transition: 0.5s linear;
	}
</style>

src/components/MyTransitionGroup.vue:

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="jojo" appear>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">大笨蛋</h1>
		</transition-group>
	</div>
</template>

<script>
export default {
    name:'MyTitle',
	data() {
		return {
			isShow:true
		}
	}
}
</script>
·
<style scoped>
	h1{
		background-color: orange;
	}

	.jojo-enter,.jojo-leave-to{
		transform: translateX(-100%);
	}

	.jojo-enter-to,.jojo-leave{
		transform: translateX(0);
	}

	.jojo-enter-active,.jojo-leave-active{
		transition: 0.5s linear;
	}
</style>

src/components/ThirdPartAnimation:

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

<script>
	import 'animate.css'
	export default {
		name:'MyTitle',
		data() {
			return {
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

</style>