Vue学习（十七）nextTick和过度与动画

Vue学习（十七）nextTick和过度与动画

文章目录

• nextTick
• 过度与动画
• • 写法
  • 使用
• TodoList 添加动画

nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次DOM更新接收后执行其指定的回调。
3. 使用时机：当数据改变后，基于更新后的新DOM进行某些操作时，在nextTick诊所指定的回调函数中执行

handleEdit(todo) {// todo.isEdit = true;if (todo.hasOwnProperty("isEdit")) {todo.isEdit = true;} else {this.$set(todo, "isEdit", "true");}/* setTimeout(()=>{this.$refs.inputTitle.focus();}, 200); */// this.$nextTick(function() {this.$refs.inputTitle.focus();});
},

过度与动画

写法

样式准备：

• 进入样式：

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

• 离开的样式：

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

使用

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

<transition name="hello"><h1 v-show="isShow">内容</h1>
</transition>

注意：若多个元素需要过度，则需要使用<transition-group></transition-group>进行包裹，且每个子元素都要指定key值

App组件

<template><div><Test/><Test2/><Test3/></div>
</template><script>import Test from './components/Test'import Test2 from './components/Test2'import Test3 from './components/Test3'export default {name: "App",// 注册组件components: {Test, Test2,Test3},}
</script>

Test组件

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