为什么会有个问题
在项目中采用了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中创建一个动画了。当然,这是一个很粗糙的例子,需要没有浏览器前缀,动画本身也很简单。