Vue学习笔记5-- nextTick | Vue封装的过渡与动画

一、nextTick(tick-工作，起作用；下次起作用）

1. 语法： this.$nextTick(回调函数）
2. 作用：在下一次DOM更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数
4. 在一个函数中，一般要函数执行完之后才会更新DOM，但有些涉及到DOM的操作比如获取焦点this.$ref.inputxxx.focus()必须DOM更新后再执行，否则不生效，这样就要使用nextTick来解决问题

this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})

二、Vue封装的过渡与动画

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
2.图示：
v-enter：进入的起点 v-enter-to：进入的终点
v-leave：离开的起点 v-leave-to：离开的终点

3.写法

• 准备好样式

  • 元素进入的样式
    • v-enter：进入的起点
    • v-enter-active： 进入过程中
    • v-enter-to：进入的终点
  • 元素离开的样式
    • v-leave：离开的起点
    • v-leave-active：离开过程中
    • v-leave-to：离开的终点

• 使用包裹要过度的元素，并配置name属性

  • name属性用于指定相应的样式
    • 如hello-enter, hello-enter-to
    • appear 用于页面一加载时就出现过渡与动画

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

• 备注：若有多个元素需要过渡，则需要使用:，且每个元素都要指定key值。

3.集成第三方动画库

推荐：https://animate.style

1. 安装上第三方动画库npm install animate.css
2. 在标签中引入import animate.css
3. 指定库名 animate__animated animate__bounce
4. 指定动画如下所示：
   enter-active-class=“animate__swing”
   leave-active-class=“animate__backOutUp”

<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">上海您好！</h1>
</transition-group>