ホームページ >ウェブフロントエンド >CSSチュートリアル >コンテンツが動的に変化するときに CSS を使用して要素の幅をアニメーション化する方法
コンテンツが変更されたときに、width: auto を使用して要素の幅をアニメーション化するにはどうすればよいですか?コンテンツは動的に変化し、アニメーションに応じて要素の幅も変化する必要があります。
CSS は自動値のアニメーション化を直接サポートしていませんが、この効果を実現するには 2 つのアプローチがあります。
1.最大幅/最大高さのトリック
.myspan { display: inline-block; font-size: 30px; background-color: #ddd; max-width: 500px; /* Set a sufficiently large max-width */ }
2.スクリプトベースの幅設定
$(document).ready(function() { $(".myspan").hover(function() { $(this).width($(this).find("span").outerWidth()); }, function() { $(this).width("auto"); }); });
max-width/max-height トリックを使用して、ホバー時に要素の幅がアニメーションする簡単な例を作成できます。
.myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom; } .myspan::after { content: " <pre class="brush:php;toolbar:false"><link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> <span class="myspan">Hello!</span>a0\f12a "; font-family: ionicons; font-size: 80%; display: inline-block; max-width: 0; transition: max-width .6s; vertical-align: bottom; overflow: hidden; } .myspan:hover::after { max-width: 80px; transition: max-width 1s; }
以上がコンテンツが動的に変化するときに CSS を使用して要素の幅をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。