SASS動畫（不是SCSS）不起作用

下午好！我嘗試爲通過React渲染的微調器製作動畫，但它不想在SASS中工作。在SCSS中它正常工作。我試圖用很多方式去做，但仍然沒有解決方案。微調器顯示，但不移動。如果有人有想法，我懇請與我分享。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); 
}

來源

2017-10-11 Nikolay Milya

您可以使用薩斯轉換https://www.npmjs.com/package/sass-convert從和不同格式（SCSS，上海社會科學院轉換，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)

來源

2017-10-11 07:59:47 jmtalarn

是的，它工作正常在SCSS語法，但在SASS它不是。我將它轉換並收到了與上面介紹的相同的變體，因爲它之前使用過。你的意思是SASS語法中的問題嗎？ –

是的，Sass語法是基於縮進的，並且可能會出現問題。 – jmtalarn

謝謝。任何想法如何在SASS製作這部動畫？我想如果語法上的問題，它將成爲另一種實現方式。附：我將SCSS的版本添加到了我的文章中。正如我所說的，它正常工作。 –

SASS動畫（不是SCSS）不起作用

回答

相關問題