一、问题如下
在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"即可获得该动画效果加持。