Question

下午好！我尝试为通过React渲染的微调器制作动画，但它不想在SASS中工作。在SCSS中它可以正常工作。我曾试图在很多方面做到这一点，但仍然没有解决方案。微调器显示，但不移动。如果有人有想法，我恳请与我分享。

有一个代码：

   <div>
     <svg className="spinner" viewBox="0 0 100 100">
         <path d="M 2 50 A 48 48 0 0 0 98 50 L 2 50" className="-ring1" />
         <path d="M 98 50 A 48 48 0 0 0 2 50 L 98 50" className="-ring2"/>
         <circle fill="black" cx="50" cy="50" r="40" />
     </svg>
   </div>  

@keyframes spinner-loading
 0%
 transform: rotateZ(0deg)
 100%
 transform: rotateZ(359deg) 

.spinner
 margin-top: 20%
 margin-left: 30%
 height: 30%
 width: 30%
 animation: spinner-loading 1.5s linear infinite

.-ring1 
 fill: white

.-ring2 
 fill: rgba(white, 0.2)

还有SCSS的版本：

@keyframes spinner-loading {
 0%{
 transform: rotateZ(0deg);
 }

 100%{
 transform: rotateZ(359deg);
  }
 }
.spinner {
  margin-top: 10%;
  margin-left: 30%;
  height: 30%;
  width: 30%;
  animation: spinner-loading 1.5s linear infinite;
 }

.-ring1 {
 fill: red;
}

.-ring2 {
 fill: rgba(255, 0, 0, 0.2);
}

Answer 1

您可以使用 Sass convert https://www.npmjs.com/package/sass-convert转换为不同的格式（scss，sass，css），这样您就可以将scss工作文件转换为sass并与之比较写信来检查有什么问题。

看一下它，如果你说它适用于使用{}限制规则的scss，它可能是你的关键帧规则的缩进问题：

@keyframes spinner-loading
 0%
   transform: rotateZ(0deg)
 100%
   transform: rotateZ(359deg) 

.spinner
 margin-top: 20%
 margin-left: 30%
 height: 30%
 width: 30%
 animation: spinner-loading 1.5s linear infinite

.-ring1 
 fill: white

.-ring2 
 fill: rgba(white, 0.2)

SASS动画（不是SCSS）不起作用

1 个答案: