Vue $nextTick && 过度与动画

 1 # $nextTick
 2 #     1.语法： this.$nextTick(回调函数);
 3 #     2.作用：在下一次DOM更新结束后执行其指定的回调。
 4 #     3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作是，要在nextTick所指定的回调函数中执行。
 5 #
 6 # Vue 封装的过度与动画
 7 #     1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
 8 #     2.写法：
 9 #         a.准备好样式：
10 #             .元素进入的样式
11 #                 v-enter：进入的起点
12 #                 v-enter-active：进入过程中
13 #                 v-enter-to：进入的终点
14 #             .元素离开的样式
15 #                 v-leave：离开的起点
16 #                 v-leave-active：离开过程中
17 #                 v-leave-to：离开的终点
18 #         b.使用<transition>包裹要过度的元素，并配置name属性：
19              <transition name="hello">
20                  <h1 v-show="isShow">hello!</h1>
21             </transition>
22 #         c.备注：若有多个元素需要过度，则需要使用：<transition-group>,且每个元素都要指定key值。

 1 Vue封装的过度与动画
 2 <template>
 3     <div>
 4         <button @click="isShow = !isShow">显示/隐藏</button>
 5         <transition name="hello" :appear="true">
 6             <h1 v-show="isShow">你好啊！</h1>
 7         </transition>
 8     </div>
 9 </template>
10
11 <script>
12 export default {
13     name: 'Test',
14     data(){
15         return {
16             isShow: true
17         }
18     }
19 }
20 </script>
21 <style scoped>
22     h1{
23         background-color: orange;
24     }
25     .hello-enter-active{
26         animation: chad 0.5s linear;
27     }
28     .hello-leave-active{
29         animation: chad 0.5s linear reverse;
30     }
31
32     @keyframes chad {
33         from{
34             /* transform: translateX(-100px); */
35             transform: translateX(-100%);
36         }
37         to{
38             transform: translateX(0px);
39         }
40     }
41 </style>

 1 transition-group
 2 <template>
 3     <div>
 4         <button @click="isShow = !isShow">显示/隐藏</button>
 5         <transition name="hello" :appear="true">
 6             <h1 v-show="isShow">你好啊！!</h1>
 7         </transition>
 8         <transition-group name="hello" :appear="true">
 9             <h1 v-show="isShow" key="1">你好啊！!!!</h1>
10             <h1 v-show="isShow" key="2">你好啊！!!</h1>
11         </transition-group>
12     </div>
13 </template>
14
15 <script>
16 export default {
17     name: 'Test2',
18     data(){
19         return {
20             isShow: true
21         }
22     }
23 }
24 </script>
25 <style scoped>
26     h1{
27         background-color: orange;
28     }
29     /* 进入的起点、离开的终点 */
30     .hello-enter, .hello-leave-to{
31         transform: translateX(-100%);
32     }
33     /* 正在进入起点、正在离开起点 */
34     .hello-enter-active, .hello-leave-active{
35         transition: 0.5s linear;
36     }
37     /* 进入的终点、离开的起点 */
38     .hello-enter-to, .hello-leave{
39         transform: translateX(0);
40     }
41
42     @keyframes chad {
43         from{
44             /* transform: translateX(-100px); */
45             transform: translateX(-100%);
46         }
47         to{
48             transform: translateX(0px);
49         }
50     }
51 </style>

 1 第三方动画效果样式库：animate.css
 2 <template>
 3     <div>
 4         <button @click="isShow = !isShow">显示/隐藏</button>
 5         <transition-group
 6             appear
 7             name="animate__animated animate__bounce"
 8             enter-active-class="animate__bounceIn"
 9             leave-active-class="animate__bounceOut"
10         >
11             <h1 v-show="isShow" key="1" class="animate__animated animate__bounce">你好啊！!</h1>
12         </transition-group>
13     </div>
14 </template>
15
16 <script>
17 import 'animate.css';// 第三方库   https://animate.style/
18 export default {
19     name: 'Test3',
20     data(){
21         return {
22             isShow: true
23         }
24     }
25 }
26 </script>
27 <style scoped>
28     h1{
29         background-color: orange;
30         animation-duration: 0.5s; /* don't forget to set a duration! */
31     }
32
33 </style>