Osheep

时光不回头,当下最重要。

Vue 常用的过渡

前言

正文

  • fade(淡入淡出),大概是最常见的:

    .fade-enter-active,
    .fade-leave-active {
      transition: opacity .3s; 
    }
      
    .fade-enter,
    .fade-leave-active {
      opacity: 0;
    }
    
《Vue 常用的过渡》

 .slide-left-enter,
 .slide-right-leave-to {
  opacity: 0;
  transform: translate(-30px, 0);
}

.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate(-30px, 0);
}

《Vue 常用的过渡》

《Vue 常用的过渡》

  • btn :

    <template>
      <div>
        <transition-group tag="div" name="btn">
          <button key="1">a</button>
          <button key="2">b</butotn>
        </transition-group>
      </div>
    <template>
      
    <style>
    .btn-enter-active,
    .btn-leave-active {
      transition: all .5s; 
    }
      
    .btn-enter,
    .btn-leave-active {
      opacity: 0;
      transform: translateX(30px); 
    }
      
    .btn-move {
      transition: all .5s; 
    }
      
    .btn-leave-active {
      position: absolute; 
    }
    </style>
    
    
《Vue 常用的过渡》

用于面包屑:

《Vue 常用的过渡》

最后:

  • 过渡,可以是景上添花,也可以是 shit 。
  • 欢迎评论区补充。
点赞

发表评论

电子邮件地址不会被公开。