less 伪元素after/before animation动画变量名总是被编译的解决方法 global @keyframes

2022-11-24

常规元素动画，一般都能正常全编译。

.red-orbit {
  width: 45px;
  height: 45px;
  border: 1px solid #ffca91a5;
  -webkit-animation: spin3D 1s linear 0s infinite;
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}

如果不生效，参考使用local，限制作用域，简单说就是在目标元素后面添加 :local，见文末参考文章。

   .red-orbit :local {
      animation: globeRotate 0.5s linear infinite;
    }

然而，less中对于伪元素after/before，目测不适用，具体原因还不是很清楚。

找了一大堆方法，最后决定使用一种比较万能的方法，元素内的动画名和关键帧的动画名共用一个变量来表示：@name: ~’customname’。

（感谢原作者）

一定要注意加波浪符（～）

参考示例：

@name: ~'customname';

 .loader_blade {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: #fff;
   &:before,
   &:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: @name 1s   linear infinite;
  }
  &:after {
    color: #FF3D00;
    transform: rotateY(70deg);
    animation-delay: .4s;
  }
}

@keyframes  @name {
  0%,
  100% {
    box-shadow: .2em 0px 0 0px currentcolor;
  }
  12% {
    box-shadow: .2em .2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 .2em 0 0px currentcolor;
  }
  37% {
    box-shadow: -.2em .2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -.2em -.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0px -.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: .2em -.2em 0 0 currentcolor;
  }
}

参考资料

https://www.cnblogs.com/victorlyw/p/12295673.html

https://blog.csdn.net/qq_42833001/article/details/97623092

https://github.com/webpack-contrib/css-loader/issues/243

WEB开发