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>
相关推荐
海天胜景4 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼5 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再9 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55513 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
我是小哪吒2.021 分钟前
书籍推荐-《对抗机器学习:攻击面、防御机制与人工智能中的学习理论》
人工智能·深度学习·学习·机器学习·ai·语言模型·大模型
✎ ﹏梦醒͜ღ҉繁华落℘1 小时前
WPF学习(四)
学习·wpf
✎ ﹏梦醒͜ღ҉繁华落℘1 小时前
WPF学习(动画)
学习·wpf
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
循环过三天2 小时前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
生如夏花℡2 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos