display: none; のDOMに対してtransitionを使う際の注意

unclassified

kefi3104 のブックマーク 2016/03/04 11:56

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/249133271/comment/kefi3104" data-user-id="kefi3104" data-entry-url="https://b.hatena.ne.jp/entry/s/qiita.com/gonshi_com/items/4ae066ef4bea6d519854" data-original-href="https://qiita.com/gonshi_com/items/4ae066ef4bea6d519854" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fgonshi_com%2Fitems%2F4ae066ef4bea6d519854" data-user-icon="/users/kefi3104/profile.png">display: none; のDOMに対してtransitionを使う際の注意 - Qiita</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/unclassified">unclassified</a>]</li></ul><br><p style="clear: left"> display: none; のDOMに対してtransitionを使う際の注意</p><a class="datetime" href="https://b.hatena.ne.jp/kefi3104/20160304#bookmark-249133271"><span class="datetime-body">2016/03/04 11:56</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！

display: none; のDOMに対してtransitionを使う際の注意 - Qiita

qiita.com/gonshi_com2015/04/30

にすると同時にopacityを1へとアニメーションしたい場合。それをcssのtransitionを使って実現しようとすると、 css: .hoge{ display: none; opacity: 0; transition: opacity 1s linear 0s; } .hoge.show{ displ...

28 人がブックマーク・5 件のコメント

他のコメントを読む

＼コメントがサクサク読めるアプリです／

はてなブックマーク

display: none; のDOMに対してtransitionを使う際の注意 - Qiita

はてなブックマーク

公式Twitter

はてなのサービス