Css開發：解決在less中動畫效果失效的問題

一、問題如下

　　在vue的style樣式中使用了less，而在less中直接使用普通的動畫效果時效果會失效，無法對樣式呈現出應有的效果。

　　這個是在less編譯爲css時，添加的動畫效果和其他的附加樣式一同被進行了編譯操作，導致原本定義的動畫名稱無法被查到，所以不生效。

　　要解決這個問題，就得繞過動畫名稱被編譯的過程。

二、處理方案

　　1、定義動畫

.test(@value,@testName) {
    @keyframes @testName{
      0% {
        opacity: @value;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: @value;
      }
    }
  }

　　.test爲定義的樣式，樣式中嵌套名稱爲@testName的動畫。

　　其中.test的參數@value代表動畫裏動態的參數，@testName代表自定義的動畫名稱，參數數量不設限制，可以自由定義。

　　2、設定初始化值

　　上面定義的動畫使用的是動態參數，一個空架子，在使用中需要給定一個初始值，避免參數缺失。

.test(0.4,testAnimation);

　　0.4即爲@value的初始化參數，testAnimation爲初始化定義的動畫名稱。

　　3、定義動畫屬性

.animation(@animation-name,@animation-duration,@animation-timing-function) {
    animation: @arguments;
  }

　　@animation-name爲調用的動畫名稱，@animation-duration爲動畫的持續時間，@animation-timing-function爲動畫的速度曲線。

　　除此之外，@animation-delay、@play-state等動畫屬性，也可以根據自己的需要進行定義和添加。

　　4、使用動畫效果

.testClass{
　　// 1|動畫名 2|動畫時間 3|播放函數(比如：循環等)
　　.animation(testAnimation, 3s, infinite); 
}

　　通過定義的動畫屬性，將接受參數後初始化的動畫testAnimation，加上動畫時間等屬性後，賦給了testClass樣式。

　　在頁面中通過class="testClass"即可獲得該動畫效果加持。