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>
相关推荐
科兴第一吴彦祖6 分钟前
基于Spring Boot + Vue 3的乡村振兴综合服务平台
java·vue.js·人工智能·spring boot·推荐算法
_李小白15 分钟前
【OPENGL ES 3.0 学习笔记】第一天:认识渲染管道
笔记·学习
future141218 分钟前
单片机学习日记
单片机·嵌入式硬件·学习
半路程序员31 分钟前
Go语言学习(三)
学习
渡我白衣35 分钟前
深度学习入门(一)——从神经元到损失函数,一步步理解前向传播(上)
人工智能·深度学习·学习
bnsarocket1 小时前
Verilog和FPGA的自学笔记4——多路选择器(always语句)
笔记·fpga开发·编程·verilog·自学·硬件编程
敲代码的嘎仔1 小时前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
Man2 小时前
🔥 Vue3 动态 ref 黑科技:一招解决 v-for 中的组件引用难题!
前端·vue.js
Amy_au2 小时前
AWS Lambda 学习笔
学习·云计算·aws
叫我少年2 小时前
Vue3 集成 VueRouter
vue.js