vue 元素动画过渡效果

    .red {background-color: red; width: 100px; height: 100px;}    .red.v-leave { margin-top: 50px; }    .red.v-leave-active {  transition: all 3s;}    .red.v-leave-to { margin-top: 100px; opacity: 0;}    .red.v-enter { margin-top: 50px; }    .red.v-enter-active {  transition: all 3s;}    .red.v-enter-to { margin-top: 10px; opacity: 0;}
    
        
    
    button

• .v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；

• .v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；

• .v-leave-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；

事例中，当点击 button，div 并不会马上 display: none， 而是首先设置 .v-leave ，下一刻即删除 .v-leave ，同时添加 .v-leave-active .v-leave-to，当 .v-leave-active 中的过渡时间执行完成，则删除 .v-leave-active .v-leave-to，同时添加 display: none。

• .v-enter 当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除；

• .v-enter-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；

• .v-enter-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；

事例中，当点击 button，div 马上清除 display: none， 然后设置 .v-enter ，下一刻即删除 .v-enter ，同时添加 .v-enter-active .v-enter-to，当 .v-enter-active 中的过渡时间执行完成，则删除 .v-enter-active .v-enter-to。

    .red {background-color: red; width: 100px; height: 100px;}    .red.slide-leave { margin-top: 50px; }    .red.slide-leave-active {  transition: all 3s;}    .red.slide-leave-to { margin-top: 100px; opacity: 0;}    .red.slide-enter { margin-top: 50px; }    .red.slide-enter-active {  transition: all 3s;}    .red.slide-enter-to { margin-top: 10px; opacity: 0;}
    
        
    
    button

该效果与上一例效果完全一致的，transition 元素可以使用 name 属性来指定使用的类名前缀，从而代替 v-字段，例如事例中的 name="slide" 使本来的 .v-enter 变成了 .slide-enter。

@keyframes aslide {
   0% {       margin-left: 10px;
   }
   100% {       margin-left: 100px;
   }
}   .red {background-color: red; width: 100px; height: 100px;}   .blue {background-color: blue; width: 100px; height: 100px;}   .v-leave { margin-top: 50px; }   .v-leave-active {  transition: all 3s; animation: aslide 5s;}   .v-leave-to { margin-top: 100px;}
   
       
   
   

   
       
   
   button

vue-transition-2.gif

事例中，动画同时指定了 transition 和 animation 动画， transition 元素的 type 属性可以指定以哪种动画的时间为元素的结束时间，如果不指定动画监控的方式，则会以最长时间的为准。

    .red {background-color: red; width: 100px; height: 100px;}    .v-leave { margin-top: 50px; }    .v-leave-active {  transition: all 3s;}    .v-leave-to { margin-top: 100px;}
    
        
    
    button

vue-transition-3.gif

• 一旦使用 js 事件，原 css 动画过渡效果就会无效，官方推荐在 上设置 v-bind:css="false" 可令 vue 内部机制免去监测 css 动画事件回调，提高性能。

• enter 和 leave 事件需手动调用 done 方法，不然事件一直不会调用后续的 after 事件，没有调用 after 事件但是又有其他事件开始了，则被视为动画被 cancel 了。

@keyframes aslide {
    0% {        margin-left: 10px;
    }
    100% {        margin-left: 100px;
    }
}    .red {background-color: red; width: 100px; height: 100px;}    .apper { margin-top: 50px; }    .apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
    
        
    
    button

vue-transition-4.gif

• appear 属性表示开启初始化动画，appear-class 属性指定初始化前的样式，appear-active-class 属性指定初始化动画过程的样式；

• transition 动画无法在初始化动画中起效，而 animation 动画则可以；

• before-appear appear after-appear 是事件回调，看事例相当清晰。

    .v-enter-active { transition: all 1.5s;}    .v-enter-to { margin-top: 100px;}    .v-leave-active { transition: all 1.5s;}    .v-leave-to { margin-top: 10px;}
    
        
            on
            off
        
    
    
        
            on
            off
        
    

vue-transition-5.gif

• show1 为什么没有动画效果呢？因为 vue 会把切换中的两个 button 识别成同一个元素，只是修改了 button 中的不同内容，所以实际上页面并没有发生 DOM 元素的切换；

• 如果要让 vue 明确识别出这是2个不同的 button 元素，则为每个元素指定不同的 key 属性的值。

    .v-enter { margin-left: 100px;}    .v-enter-active { transition: all 5s;}    .v-enter-to { margin-left: 10px;}    .v-leave { margin-left: 10px;}    .v-leave-active { transition: all 5s;}    .v-leave-to { margin-left: 100px;}
    
        
            on
            off
        
    
    
        
            on
            off
        
    
    
        
            on
            off
        
    

vue-transition-6.gif

• transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；

• mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；

• mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；

    .v-enter { margin-left: 100px;}    .v-enter-active { transition: all 2s;}    .v-enter-to { margin-left: 10px;}
    
        {{item}}
    
    
        {{item}}
    
    add

vue-transition-7.gif

• transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；

• transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；

• transition-group 必须为每一个子元素指定 key；

    .v-move { transition: all 1s; }
    
        {{item}}
    
    reverse

vue-transition-8.gif

• transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；

• transition 的属性， transition-group 都有，包括 name enter leave；

 作者：rayman_v

链接：https://www.jianshu.com/p/109f532928b0