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>
相关推荐
武天14 小时前
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
vue.js
金宗汉15 小时前
《宇宙递归拓扑学:基于自指性与拓扑流形的无限逼近模型》
大数据·人工智能·笔记·算法·观察者模式
张永清-老清15 小时前
每周读书与学习->JMeter主要元件详细介绍(一)配置元件
学习·jmeter·性能调优·jmeter性能测试·性能分析·干货分享
狮智先生15 小时前
【学习笔记】利用meshlab进行曲面的质量检查
经验分享·笔记·课程设计·几何学
敲敲敲敲暴你脑袋15 小时前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
鼾声鼾语15 小时前
grootN1 grootN1.5 gr00t安装方法以及使用(学习)
学习·angular.js·simulink·isaacsim·isaaclab
盛夏绽放16 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
国家不保护废物16 小时前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
MYX_30916 小时前
第七章 完整的模型训练
pytorch·python·深度学习·学习
新子y16 小时前
【小白笔记】岛屿数量
笔记·python