This website requires JavaScript.

Vue 常用的过渡

2017.11.05 10:58字数 1826阅读 1995喜欢 17评论 3

前言

正文

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

    .fade-enter-active,
    .fade-leave-active {
      transition: opacity .3s; 
    }
    
    .fade-enter,
    .fade-leave-active {
      opacity: 0;
    }
    
  • 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>
    
    

用于面包屑:

最后:

过渡,可以是景上添花,也可以是 shit 。