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

发布时间:2024年01月16日

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

  1. 语法: this.$nextTick(回调函数)
  2. 作用:在下一次DOM更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数
  4. 在一个函数中,一般要函数执行完之后才会更新DOM,但有些涉及到DOM的操作比如获取焦点this.$ref.inputxxx.focus()必须DOM更新后再执行,否则不生效,这样就要使用nextTick来解决问题
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 用于页面一加载时就出现过渡与动画
 <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”
<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>
文章来源:https://blog.csdn.net/jxncxgx/article/details/135579341
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。