[JavaScript知识库]Vue——transition组件

Vue的transition组件

• 使用<transition>的时机，为什么使用<transition>，<transition>的实现原理

  • 首先我们需要理解<transition>有什么作用

    • <transition>组件用于给某个元素或组件添加过渡动画效果，只需要用<transition>把该元素或组件包裹起来，就可以封装成过渡组件。

      <transition name="fade">
      	<my-component></my-component>
      </transition>
      

  • <transition>的过渡效果出现时机

    • vue只有在插入、更新、移除DOM元素时，才会触发过渡效果
    • 所以只有在被插入、更新、移除的时候，封装成过渡组件才会出现过渡效果。

  • <transition>过渡效果的实现原理

    • <transition>的过渡效果的实现原理有2种
      • 利用CSS transition或animation来实现
      • 利用JavaScript钩子函数来实现
    • 也就是说，我们使用过渡组件也需要使用CSS或JavaScript来为它定义过渡效果。

  • 过渡组件的过渡效果的执行逻辑

    • 当有一个过渡组件A被插入、更新、移除后，会经过以下3步
      • 第一步，首先Vue会去查找过渡组件是否定义了CSS transition或animation效果，如果有的话，就会执行CSS定义的过渡效果。
      • 第二步，如果过渡组件没有设置CSS效果，那么Vue会去查找过渡组件是否设置了JavaScript钩子函数，如果有，会执行钩子函数定义的过渡效果。
      • 第三步，如果CSS和钩子函数都没有设置，那么不会展示过渡效果。（这时和未被<transition>包裹一样）。

• <transition>的使用方法（CSS为例。命名<transition>会自动生成6个类供我们控制过渡效果）

  • 如果我们想要使用一个<transition>组件包裹而成的过渡组件，那么我们需要为<transition>设置一个name属性。

    <transition name="fade">
      <my-component></my-component>
    </transition>
    

  • 这样在组件过渡的过程中，会具有以下6个类名以供我们控制过渡效果

    这里我们将过渡过程分成2种：进入过渡（元素插入后进入过渡，一直到过渡效果完成结束）；离开过渡（元素移除后进入离开过渡，过渡效果完成结束）

    • xxx-enter（fade-enter），进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
    • xxx-enter-active（fade-enter-active），进入过渡的整个过程，元素被插入时生效，过渡过程完成后被移除。
    • xxx-enter-to（fade-enter-to），进入过渡的结束部分，在元素被插入后下一帧生效（这时xxx-enter被移除），在过渡效果完成后被移除。
    • xxx-leave（fade-leave），离开过渡的开始阶段，元素被删除时触发，只生效一帧后删除。
    • xxx-leave-active（fade-leave-active），离开过渡的整个阶段，元素被删除时生效，离开过渡完成时结束。
    • xxx-leave-to（fade-leave-to），离开过渡的结束阶段，在离开过渡被触发后一帧生效（同时xxx-leave被移除），在过渡完成之后移除

  

• 自定义过渡类名

  • 自定义过渡类名是什么

    • 当我们对<transition>做了命名，那么会根据name属性自动生成。但是我们也可以通过为<transition>定义以下6个属性来定义类似于上面6个类名的自定义类名
      • enter-class，对标xxx-enter
      • enter-active-class，对标xxx-enter-active
      • enter-to-class，对标xxx-enter-to
      • leave-class，对标xxx-leave-class
      • leave-active-class，对标，xxx-leave-active
      • leave-to-class，对标xxx-leave-to

    <transition name="fade" 
      enter-class="fade-enter" 
      enter-active-class="fade-in-active"
      enter-to-class="fade-in-to"
      leave-class="fade-leave"
      leave-active-class="fade-out-active"
      leave-to-class="fade-out-to"
      >
      <my-component></my-component>
    </transition>
    

  • 为什么需要自定义过渡类名，自定义过渡类名的作用，什么时候使用自定义过渡类名

    • 自定义过渡类名优先级高于普通类名，在混合使用外部组件的时候会比较有用。

• 如何指定过渡持续时间

  • 为什么需要指定过渡持续时间，指定过渡持续时间的作用

    • 大多数时候，使用Vue自动得出的过渡持续时间就可以达到预期效果，但有时候，我们需要手动控制整个过渡时间的持续时间、控制进入过渡的持续时间、控制离开过渡的持续时间

  • 指定过渡持续时间的方法（毫秒为单位）

    <transition :duration="1000">
      <my-component></my-component>
    </transition>
    

    <transition :duration="{enter: 500, leave: 800}">
      <my-component></my-component>
    </transition>
    

    第二个例子中，我们分别指定了进入过渡和离开过渡的持续时间。