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

jxncxgx2024-01-16 22:12

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

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

javascript 复制代码

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 用于页面一加载时就出现过渡与动画

javascript 复制代码

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

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

3.集成第三方动画库

推荐：https://animate.style

安装上第三方动画库npm install animate.css
在<script></script>标签中引入import animate.css
指定库名 animate__animated animate__bounce
指定动画如下所示：
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"

javascript 复制代码

<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>