jQuery無しでイージングアニメーションを伴う機能をつくろう！その2（トグル編） | フロントエンドBlog | ミツエーリンクス

2017年12月20日 jQuery無しでイージングアニメーションを伴う機能をつくろう！その2（トグル編） UI開発者 宇賀 本記事の補足記事を公開しました（2019/06/28） JavaScriptで操作するCSS TransitionとCSSOMの関係 jQueryを使わずにスムーズなアニメーションを実装しようというシリーズの第2弾です。 今回は様々なWebサイトで採用されているUIの1つ、ディスクロージャーウィジェット（いわゆるトグル）の実装方法を考えて見ます。 jQueryを使った例では「.slideToggle()」や「.slideDown()」「.slideUp()」などで実現されていることが多いでしょう。 HTMLの仕様でも、トグルのように情報の表示非表示を切り替えることができる要素が定義されていますので、今回はそんなdetails要素とsummary要素も活用していきたい