前端之路——在less中创建动画

为什么会有个问题

• 在项目中采用了react

• 样式使用的是less

• 动画使用css3 中的animation属性

• 在webpack打包后，less中的类名都被加上了前缀，导致使用css animation-name属性中的无法正常应用到@keyframes <animation-name>中定义的动画名

如下图

image.png

less中如何解决该问题

概括地说就是通过less的mixin，创建函数，从函数中返回动画名。

• 定义一个函数

  ```less
      .animation(@name, @rules){
          @keyframes @name {
              @rules();
            } 
        } 
  
    ``` 
  

• 调用该函数，生成一个动画

        .animation(my-animation, {
            from { top: 0; } 
            to { top: 100px; }
        })
    ```
  
  

• 应用改动画到某个元素

    ```less
        .target{
            animation: my-animation 2s ease-out infinite;
        }
    ```
  

以上，就可以在less中创建一个动画了。当然，这是一个很粗糙的例子，需要没有浏览器前缀，动画本身也很简单。