Vue——transition组件

Vue的transition组件

  • 使用的时机,为什么使用的实现原理

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

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

        
        	
        
        
    • 的过渡效果出现时机

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

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

      • 当有一个过渡组件A被插入、更新、移除后,会经过以下3步
        • 第一步,首先Vue会去查找过渡组件是否定义了CSS transition或animation效果,如果有的话,就会执行CSS定义的过渡效果。
        • 第二步,如果过渡组件没有设置CSS效果,那么Vue会去查找过渡组件是否设置了JavaScript钩子函数,如果有,会执行钩子函数定义的过渡效果。
        • 第三步,如果CSS和钩子函数都没有设置,那么不会展示过渡效果。(这时和未被包裹一样)。
  • 的使用方法(CSS为例。命名会自动生成6个类供我们控制过渡效果)

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

      
        
      
      
    • 这样在组件过渡的过程中,会具有以下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被移除),在过渡完成之后移除

    Vue——transition组件_第1张图片

  • 自定义过渡类名

    • 自定义过渡类名是什么

      • 当我们对做了命名,那么会根据name属性自动生成。但是我们也可以通过为定义以下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
      
        
      
      
    • 为什么需要自定义过渡类名,自定义过渡类名的作用,什么时候使用自定义过渡类名

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

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

      • 大多数时候,使用Vue自动得出的过渡持续时间就可以达到预期效果,但有时候,我们需要手动控制整个过渡时间的持续时间、控制进入过渡的持续时间、控制离开过渡的持续时间
    • 指定过渡持续时间的方法(毫秒为单位)

      
        
      
      
      
        
      
      

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

你可能感兴趣的:(Vue,vue.js)