12 [nextTick transition and animation]

1.nextTick

This is a lifecycle hook

1. grammar:this.$nextTick(回调函数)
2. Function: Execute the specified callback after the next DOM update.
3. When to use: When the data is changed and some operations are to be performed based on the updated new DOM, it must be executed in the callback function specified by nextTick.

For example, the edit button turns the text into a form and automatically gains focus

When the form is clicked, a Boolean value will be used with v-show to display the form, but when the Boolean value is changed, the following focus method will be executed, and then the template will be rendered

<template>
  <li>
    <label>
      <input type="checkbox" :checked="todo.done" >
      <span v-show="!todo.isEdit">{
   
   { todo.title }}</span>
      <input type="text" v-show="todo.isEdit" 				          
             :value="todo.title"ref="inputTitle"/>
    </label>
    <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">
      编辑
    </button>
  </li>
</template>

<script>
export default {
      
      
  name: "MyItem",
  
  props: ["todo"],	// 声明接收todo
  methods: {
      
      
    handleEdit(todo) {
      
      	// 编辑
      if (todo.hasOwnProperty("isEdit")) {
      
      
        todo.isEdit = true;
      } else {
      
      
        this.$set(todo, "isEdit", true);
      }
      this.$nextTick(function () {
      
      
        this.$refs.inputTitle.focus();
      });
    },
  },
};
</script>

2. Transitions and Animations

2.1 Basic introduction

Vue provides a number of different ways to apply transition effects when inserting, updating, or removing the DOM.
Including the following tools:
1. Automatically apply classes in CSS transitions and animations;
2. Cooperate with third-party CSS animation libraries, such as Animate.css;
3. Use JavaScript in the transition hook function to directly manipulate DOM;
4. Cooperate with third-party JavaScript animation libraries such as Velocity.js.

1. Function: Vue encapsulates that when inserting, updating or removing DOMelements, add a style class name to the element at the appropriate time.

2. Writing:

   1. Ready to style:

      • Elements come in styles:
        1. v-enter: the starting point of entry
        2. v-enter-active: in the process of entering
        3. v-enter-to: the end point of entry
      • Styles for element leaving:
        1. v-leave: the starting point of leaving
        2. v-leave-active: in the process of leaving
        3. v-leave-to: the end point of leaving

   2. Use <transition>the elements to be wrapped and configure the attributes. At this time, you need to replace namethe above style name withvname

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

   3. To animate the page from the start, you need to addappear

   4. Remarks: If there are multiple elements that need to be transitioned, you need to use: <transition-group>, and each element must specify keya value.

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

   5. Third-Party Animation LibrariesAnimate.css

      <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">lktest！</h1>
      		</transition-group>
      	</div>
      </template>
      
      <script>
      	import 'animate.css'
      	export default {
      		name:'Test',
      		data() {
      			return {
      				isShow:true
      			}
      		},
      	}
      </script>
      

2.2 Use of animation

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

<style>
.hello-enter-active{
 animation: hello 0.5s linear;
}

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

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

2.3 Use of transitions

<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">lktest！</h1>
 </transition-group>
</div>
</template>

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

<style scoped>
h1 {
 background-color: orange;
 /* transition: 0.5s linear; */
}
/* 进入的起点、离开的终点 */
.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>