Vue——transition组件

Jersey
154 阅读4分钟

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被移除），在过渡完成之后移除

    截屏2022-03-02 下午4.56.43.png

  • 自定义过渡类名

    • 自定义过渡类名是什么

      • 当我们对<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>

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

avatar
文章
阅读
粉丝