この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーションがなぜ無効なのかと尋ねました。 疑似コードはおそらく次のようになります: { 高さ: 未設定; 遷移: すべて 0.3 秒線形。 変更予定: 高さ; &。上 { 高さ: 0; } &。下 { 高さ: 未設定; } } これを実際のデモに復元すると、効果は次のようになります (基本的な考え方は、要素の えっ?とても不思議です。height 期待される効果は以下のとおりです。 トランジションは高さ: 自動をサポートしていません上記のコードが 仕様を見ると、CSS トランジションが要素の高さの auto への変更をサポートしていないことが原因です。 上記の { &。上 { 高さ: 0; } &。下 { - 高さ: 未設定; + 高さ: 500px; } } しかし、ダイナミックな高さの変化も実現したいと考えます。他に方法はないのでしょうか? 動的高さに適応するためにmax-heightを巧みに使うねえ、ここにとても興味深いちょっとしたトリックがあるんだよ。 上記のコードを修正して、 { 最大高さ: 0; 遷移: 最大高さ 0.3 秒線形; &。上 { 最大高さ: 0; } &。下 { 最大高さ: 1000px; } } 実際のコンテナの最大の高さを見積もってみましょう。ここでの CodePen デモ - 高さプロパティの遷移が機能しない 小さな欠陥全体的な効果は依然として非常に素晴らしいですが、もちろん、2つの小さな欠陥があるかもしれません。
元の拡張アニメーションでは、コンテナの高さが 1 秒で 1000 ピクセルまで伸びると予想されていましたが、実際には 200 ピクセルで停止したため、アニメーション時間はわずか 0.2 秒でした。まとめると、この方法は良いものですが、使用する際には具体的な分析が必要です。 CSS 動的高さ遷移アニメーション効果の実装に関するこの記事はこれで終わりです。CSS 高さ遷移アニメーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する
>>: HTML はモバイル上で固定フローティング半透明検索ボックスを実装します
SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...
animation-name アニメーション名。複数のアニメーションがバインドされていることを示す...
目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...
ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用さ...
需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...
CentOS 7 の yum ソースには、MySQL を正常にインストールするための mysql-s...
目次序文vue-cli 2.0 バージョンvue-cli 3.0 バージョン要約する序文vue-cl...
この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...
これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...
目次導入説明書実際の経験まとめ導入MySQL は最も人気のあるオープンソース データベースとして、さ...
yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...
Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...
序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...
シナリオ: docker で tomcat を起動すると (Alibaba Cloud からダウンロ...
前回の記事 https://www.jb51.net/article/154153.htm では、B...