0
点赞
收藏
分享

微信扫一扫

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

为什么会有个问题

  • 在项目中采用了react

  • 样式使用的是less

  • 动画使用css3 中的animation属性

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

如下图

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中创建一个动画了。当然,这是一个很粗糙的例子,需要没有浏览器前缀,动画本身也很简单。

举报

相关推荐

0 条评论