Vue (14) — nextTick、Vue封装的过渡与动画

目录

一、nextTick

  1.语法

  2.作用

  3.什么时候用

二、Vue封装的过渡与动画

  1.作用

  2.图示

  3.写法

---

一、nextTick

  1.语法

         this.$nextTick(回调函数)

 

  2.作用

        在下一次DOM更新结束后执行其指定的回调

 

  3.什么时候用

        当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

 

二、Vue封装的过渡与动画

  1.作用

        在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

 

  2.图示

 

 

  3.写法

    1.准备好样式

        ·元素进入的样式：

        1. v-enter ：进入的起点

        2. v-enter-active ：进入过程中

        3. v-enter-to ：进入的终点

        ·元素离开的样式：

        1. v-leave ：离开的起点

        2. v-leave-active ：离开过程中

        3. v-leave-to ：离开的终点

    2.使用 <transition> 包裹要过渡的元素，并配置 name 属性：   

<transition name="hello" >
      <h1 v-show="isShow">你好啊！</h1>
</transition>

    3.备注：若有多个元素需要过渡，则需要使用：<transition-group> ,且每个元素都要指定 key值。   

<transition-group>
      <h1 v-show="isShow" key="1">你好啊！</h1>
</transition-group>