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

一、nextTick(tick-工作,起作用;下次起作用)

  1. 语法: this.$nextTick(回调函数)
  2. 作用:在下一次DOM更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数
  4. 在一个函数中,一般要函数执行完之后才会更新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

  1. 安装上第三方动画库npm install animate.css
  2. <script></script>标签中引入import animate.css
  3. 指定库名 animate__animated animate__bounce
  4. 指定动画如下所示:
    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>
相关推荐
hi0_66 分钟前
03 数组 VS 链表
java·数据结构·c++·笔记·算法·链表
拾光拾趣录12 分钟前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
Wy. Lsy2 小时前
Kotlin基础学习记录
开发语言·学习·kotlin
The_Killer.2 小时前
格密码--数学基础--06对偶空间与对偶格
学习·线性代数·密码学
Andy杨2 小时前
20250712-1-Kubernetes 监控与日志管理-K8s日志管理与维护_笔记
笔记·容器·kubernetes
撰卢2 小时前
【个人笔记】负载均衡
运维·笔记·负载均衡
栈溢出了3 小时前
MyBatis实现分页查询-苍穹外卖笔记
java·笔记·mybatis
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
之歆3 小时前
Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记
笔记·python·学习
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js