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

 

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/17701939.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！