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"即可获得该动画效果加持。