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>
标签:nextTick,Vue,translateX,transform,leave,&&,enter,active,hello 来源: https://www.cnblogs.com/watermeloncode/p/16381029.html