ホームページ > 記事 > ウェブフロントエンド > 高さが可変の要素に CSS3transition_html/css_WEB-ITnose を追加する方法
高さが可変の要素に CSS3transition_html/css_WEB-ITnose を追加する方法
- WBOYオリジナル
- 2016-06-24 11:42:231449ブラウズ
ただし、要素で高さが設定されていない場合、そのデフォルト値は 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 までご連絡ください。