2016-08-15 16 views
1

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/

+0

非表示の要素をアニメーション化する理由を説明できますか? – Scott

+0

ローダーで、隠れてしまい、その後に表示する必要があります。 –

+0

要素をアニメートする場合は、 'display:none'ではなく' visibility:hidden'または 'opacity:0'を設定してください。 – Morpheus

答えて

4

jQuery.show()は、i要素で呼び出されたときにプロパティをinlineに設定します。 WC3のマニュアルによれば、inline要素はアニメーション化することができない。

https://drafts.csswg.org/css-transforms-1/

変形可能エレメント

変形要素は、これらのカテゴリのいずれかの要素である:そのレイアウトによって支配される 素子 ブロックレベルまたはアトミックなインラインレベルの要素、またはその表示プロパティがtable-row、table-row-group、table-header-group、に計算されるCSSボックスモデル代わりshow()を使用するinline-block、または要素をラップし、親を隠す:これを正しく表示の設定Valliusの提案を使用するテーブルフッタグループ、テーブルセル、またはテーブル・キャプション [CSS21]

代わりに。

https://jsfiddle.net/359zLsdf/2/

<span class="coggy" style="display:none" ><i class="fa fa-cog fa-spin" aria-hidden="true"></i></span> 

<i class="fa fa-cog fa-spin myCog " style="display:none" aria-hidden="true"></i> 

$(".coggy").show(); 

$(".myCog").css("display","inline-block"); 
+0

答えの2番目の部分が正解です。最初の部分を削除して読みやすくするのはどうでしょうか? –

-1

これを試してみてください:

$(".fa-cog").css("display","inline-block"); 
0

あなただけの行動の説明をしたいですか? developer.mozilla.orgから

多くの異なるディスプレイボックスの種類、どれもあなたが要素の表示をオフにすることができますない値に加えて、 noneを使用すると、すべての子孫要素の表示もオフになります。 文書が文書ツリーに存在しないかのように文書がレンダリングされます。 visibilityプロパティと比較

visibilityプロパティはに使用することができ、それはあったであろう空間を残しつつ要素を隠します。また、テーブルの行や列を非表示にすることもできます。

+0

これは私の質問には答えません。なぜ要素が表示されたらそれが回転していないのですか? –

+0

ああ、すみません。わたしはあなたの質問がわからなかった。あなたはすでに答えがあるようですね。 –

-1

私はここに同様の質問を見つけました。

CSS transition on an initially hidden elemement

回避策があるかのように見えます。 display:noneの代わりにz-index: -1で開始するか、要素のtransparentで開始するのが好きです。

関連する問題