Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
サンプルコードを作成し、挙動を確認したところ
下記のような挙動の違いが確認できました。
- ボタン1を押す→ボタン2を押す：アニメーションが再実行される
- ボタン3を押す→ボタン4を押す：アニメーションは再実行されない（ボタン3を押す前と同じ表示）
display属性とvisibility属性は、両方とも要素を表示/非表示にするものと認識しておりました。
（visibility属性を利用した場合はdisplay属性と異なり、要素の高さ、幅がそのままで空白が詰められない、ということも認識しております）
しかし、このサンプルコードのようにアニメーションの実行にも影響を与えるということは知らなかったので色々と調べてみましたが、そういった記載のあるページが見つけられませんでした。
display='block'時にアニメーションが再実行されるのは何故でしょうか？
CSSの仕様なのでしょうか？
その場合、そういった詳細な仕様はどこに書いてあるものでしょうか？
参考になるページや書籍等がありましたらご紹介頂きたいです。
また、displayのnone/blockでは動作しないが、
visibilityのhidden/visible切替時に動作するようなCSSの属性（？）もあるのでしょうか？
もしご存知の方がいらっしゃいましたら、ご教示いただければ幸いです。
よろしくお願い致します。
HTML
1<html> 2 <head> 3 <style> 4 @keyframes sampleAnimation { 5 from { 6 width:0px; 7 } 8 to { 9 width:200px; 10 } 11 } 12 13 .child { 14 background-color: #ff0000; 15 animation-name: sampleAnimation; 16 animation-duration: 1s; 17 animation-fill-mode:forwards; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="parent"> 23 <div class="child"> 24 1234567890 25 </div> 26 </div> 27 <p>display属性で切替</p> 28 <button onclick="document.getElementById('parent').style.display = 'none'">ボタン1（display=none）</button> 29 <button onclick="document.getElementById('parent').style.display = 'block'">ボタン2（display=block）</button> 30 <p>visibility属性で切替</p> 31 <button onclick="document.getElementById('parent').style.visibility = 'hidden'">ボタン3（visibility=hidden)</button> 32 <button onclick="document.getElementById('parent').style.visibility = 'visible'">ボタン4（visibility=visible)</button> 33 </body> 34</html>
回答2件
0
ベストアンサー
display='block'時にアニメーションが再実行されるのは何故でしょうか？
CSSの仕様にそのとおりに定義されています.
Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.
意訳:
display:noneが設定されているノードのdisplayプロパティをnone以外の値にすると, そのノードに設定されている全てのCSSアニメーションが実行されるよ.
投稿2018/03/26 08:49
編集2018/03/26 08:51
総合スコア4756
まんま書いてあるんですね…
わざわざ書いてあるということは結構揉めたんでしょうね
ご回答ありがとうございます。
また、丁寧に引用元URLと日本語訳まで添えて頂き、とても助かりました。
本当にありがとうございます！
0
display:none;はDOMから消えているからだと思います。
display:block;に切り替えた際にDOMの生成が発生するのは
「ページを読み込んだとき」と同様だと思います。
visibilityではDOMの生成はもちろん行われないので
「DOMの生成時にアニメーションが適用されている」という感じですかね。
「アニメーションが再適用される」のようにはあまり書いていませんが
display:none;ではDOMが生成されないというような書き方はよく見る気がします。
特にcssアニメーションではdisplay:none;に対してはできないというのは有名です。
投稿2018/03/26 08:52
総合スコア3828
ご回答ありがとうございます。
display:block時にはDOMが再度生成されるのですね。それならばアニメーションが再実行されるのも当然だと思います。参考になりました！
> display:block;に切り替えた際にDOMの生成が発生するのは
というのには語弊があって, もう少し正確には「レイアウト上, DOMに存在しなかったの如くに振る舞う」.つまり, DOMにノードは存在しているけれど, CSSによるレイアウトの対象からは外れるのです.
再度コメントありがとうございます。DOMから削除→再度DOMに追加、という挙動ではないのですね、勉強になりました！
DOMはあるけれどCSSが当たらない状態になっているってことですね。勉強になります。
ちなみに::beforeとかもdisplay:none;下ではdevtoolで見ても表示（というか生成？）されていないです。
::before等の疑似要素はCSSにおける概念であり, 対象のノードが「DOMに存在する(ように振る舞う、つまりdisplay:none以外)場合に, CSSによるレイアウト時にあたかもそこにノードが存在するかのように扱われるもの」なので, display:noneの場合はそれに引きずられて::before擬似要素も存在しないことになります.
あなたの回答
tips
プレビュー
