vue.js之动画篇

本文引入类库的方式均采用CND的方式，可直接复制代码到编辑器中学习和测试

• 不使用动画切换元素

 1    2      3      4     这是一个H3 5    6   

• 使用过渡类名实现动画

  
  
    
    .v-enter,.v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
    
    .v-enter-active,.v-leave-active {
      transition: all 0.8s ease;
    }
  
  
    
    
    
    
    
      这是一个H3
    
  
  

• 修改“v-”前缀用上面一种方式实现多个动画

 1  2  3  4    5    6    7   

 9   10   11     13     .v-enter,14     .v-leave-to {15       opacity: 0;16       transform: translateX(150px);17     }18     20     .v-enter-active,21     .v-leave-active {22       transition: all 0.8s ease;23     }24 25     .my-enter,26     .my-leave-to {27       opacity: 0;28       transform: translateY(70px);29     }30 31     .my-enter-active,32     .my-leave-active {33       transition: all 0.8s ease;34     }35   36 37 38 39   40     41     42     43     44     45       这是一个H346     47     
48     49     50       这是一个H651     52   53   64 65 66 

• 使用第三方类库来实现

 1  2  3  4  5    6    7    8    9   10   11   12 13 14 15   16     17     18     19       这是一个H320     21   22 23   33 34 35 

• 使用钩子函数模拟-动画的生命周期函数

 1  2  3  4    5    6    7   

 9   10     .ball {11       width: 15px;12       height: 15px;13       border-radius: 50%;14       background-color: red;15     }16   17 18 19   20     21     22     23       24     25   26 27   62 63 64 

• 动画列表

 1  2  3  4  5    6    7    8    9   10   11     li {12       margin: 5px;13       line-height: 35px;14       padding-left: 5px;15       font-size: 12px;16       width: 100%;17     }18     li:hover {19       background-color: hotpink;20       transition: all 0.8s ease;21     }22     .v-enter,23     .v-leave-to {24       opacity: 0;25       transform: translateY(80px);26     }27     .v-enter-active,28     .v-leave-active {29       transition: all 0.6s ease;30     }31     32     .v-move {33       transition: all 0.6s ease;34     }35     .v-leave-active {36       position: absolute;37     }38   39 40 41   42     43       44         Id:45         46       47       48         Name:49         50       51       52     53     54     55     56     57     58     59       60         {{item.id}} --- {{item.name}}61       62     63     64   65   90 91 

原文出处：https://www.cnblogs.com/netlws/p/9499309.html