高さが可変の要素に CSS3transition_html/css_WEB-ITnose を追加する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

高さが可変の要素に CSS3transition_html/css_WEB-ITnose を追加する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:42 AM

ただし、要素で高さが設定されていない場合、そのデフォルト値は auto であり、ブラウザーが実際の高さを計算します。

しかし、height:auto を使用してブロックレベル要素の高さに CSS3 アニメーションを追加したい場合はどうすればよいでしょうか?

MDN では、次のようにアニメーションをサポートする CSS プロパティの中で高さ属性を見つけることができます:

height: はい、長さ、パーセント、または calc() として // 高さの値が長さ、パーセント、または calc( ) CSS3 トランジションをサポートします。

そのため、要素の高さが auto の場合、CSS3 アニメーションはサポートされません。

JS を通じて正確な高さの値を取得することに加えて、実際には高さの代わりに max-height を使用できます。

要素の自動増加よりも確実に大きい高さの値を設定する限り、それだけです。もちろん、トランジション効果は最大高さの値に基づいているため、過度に大きくしないことが最善です。そうしないと、アニメーション効果が理想的ではなくなります。

 1 <!DOCTYPE html> 2 <html lang="en"> 3     <head> 4         <meta charset="utf-8"> 5         <style> 6             *{ 7                 margin: 0; 8                 padding:0; 9             }10             div{11                 12                 display: inline-block;13                 overflow: hidden;14                 background-color: orange;15                 max-height: 20px;16                 -webkit-transition: max-height 1s;17                 transition: max-height 1s;18             }19             div:hover{20                 max-height:200px;21             }22         </style>23     </head>24     <body>25         <div>26             <p>我不是height，是max-height</p>27             <p>我不是height，是max-height</p>28             <p>我不是height，是max-height</p>29             <p>我不是height，是max-height</p>30             <p>我不是height，是max-height</p>31             <p>我不是height，是max-height</p>32         </div>33     </body>34 </html>

ログイン後にコピー

これは私の最初のブログ投稿です。何かを学んでいただければ幸いです。もちろん、皆様からのご提案もお待ちしております！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。