display: none;
の要素を非表示にして、後で$(".fa-spin").show()
と表示すると、fa-spin
のアニメーションが機能しません。font-awesomeアニメーションがdisplayで動作しない:none;
$(".fa-spin").hide()
これは.fa-spin
実装です:
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
あなたは、この動作を説明することはできますか?すべては要素が最初に隠されていない場合は正常に動作しますが、後で隠されていることを
注意
私はこの動作の理由を尋ねていますが、回避策ではありません。
https://jsfiddle.net/md0ej7pt/
非表示の要素をアニメーション化する理由を説明できますか? – Scott
ローダーで、隠れてしまい、その後に表示する必要があります。 –
要素をアニメートする場合は、 'display:none'ではなく' visibility:hidden'または 'opacity:0'を設定してください。 – Morpheus