vue中的transition 组件

transition 组件

Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡

也就是transition组件的过渡效果是由元素的显示或隐藏触发的

• 应用场景：

  v-if , v-show 触发元素或组件的显示隐藏

  router-view组件

  过渡组件使用的步骤

• //fade为自定义动画名称
  
  <transition name="fade">
       <div class="mask" v-if="isBoxShow" @click="hide"></div>
  </transition>
  

  配套的css样式

  //过渡过程中开启transition属性
  .fade-enter-active,
  .fade-leave-active {
      transition: all .5s;
  }
  
  //动画开始和结束的状态
  .fade-enter,
  .fade-leave-to {
      opacity: 0;
  }
  

• 利用过渡组件实现css3动画

  template

  <transition name="move" appear>
      <div class="box">
          广告
      </div>
  </transition>
  

  style

  .move-enter {
      transform: translate(0,100%);
  }
  .move-enter-active{
      animation: move 1s;
  }
  @keyframes move {
      0% {}
      30% {
          transform: translate(-50%, -50%);
      }
      50% {
          transform: translate(-50%, -100%);
      }
      70% {
          transform: translate(-50%, -50%);
      }
      
      80% {
          transform: translate(-50%, -80%);
      }
      100% {
          transform: translate(-50%, -50%);
      }
  }
  

• 总结transition组件的属性

  1. mode模式

     一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生

     • in-out：新元素先进行过渡，完成之后当前元素过渡离开。
     • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

  2. appear

     不添加： 初始化时没有过渡，切换显示和隐藏后显示过渡效果

     添加： 初始化时即显示过渡