アニメーション中にスクロールバーを非表示にします

CSSは、自動サイズにアニメーション化することはできません。

 。落ちる {
  遷移：0.2秒;
  高さ：0;
}
.dropdown.open {
  /*高さは変わりますが、アニメーション化されません。 */
  高さ：自動;
}

JavaScriptのトリックを試すことができます。ブランドン・スミスは少し前にここでいくつかのテクニックを概説しました。私はこのソリューションを非常に簡単だから考えてきました：

 。落ちる {
  遷移：0.2秒;
  Max-Height：0;
}
.dropdown.open {
  /*？ */
  Max-Height：400px;
}

この魔法の数の400pxを手に入れたので、それは本当に理想的ではありません。しかし、この方法が機能し、非常に単純であるという事実は非常に魅力的であるため、私は常に生産環境でそれを使用してきました。

しかし、魔法の数だけが問題ではありません。もう1つの問題は、Scrollbarです。

max-height: 0;を設定すると、 overflow: hidden;閉じたときにドロップダウンメニューが実際に隠されていることを確認します。ドロップダウンメニューが開くときは、おそらくoverflow: auto;ドロップダウンメニューの自然な高さが拡張されたmax-heightを超えている場合、誤ってコンテンツを遮断できないようにします。 overflow: auto;この問題を解決しますが、別の問題を紹介します。拡張中に、ドロップダウンメニューは、最終的な拡張高さに必要でない場合でも、拡張時間の少なくとも一部のために常にスクロールバーを表示します。これは恥ずかしいです！

CSSのヒントが救助されます。

overflow: auto;拡張された状態では、アニメーション中に上書きするだけです。偉大なCSS特異性の戦いで学んだように、 @keyframes 、アクティブなときに何でもカバーする驚くべき能力を持っています。アニメーションではなく、この隠されたスクロールバー機能に使用しましょう。

 。落ちる {
  Max-Height：0;
  オーバーフロー：隠し;
  遷移：最大1.2秒の容易さ。
}
.dropdown.open {
  オーバーフロー：自動;
  Max-Height：400px;
  アニメーション：1.2秒を後方に隠します。
}
@KeyFrames Hide-scroll {
  from、{overflow：hidden; }
}

それだけです！

高さをより少ない値に調整してみて、アニメーション中にスクロールバーが表示されない方法を確認してください。これにより、Scrollbarがポップアップすると少しジッターが発生しますが、私の場合はめったに発生しないため、受け入れられます。ジッターを絶対に停止したい場合は、（カスタム）スクロールバーをドロップダウンメニューに常に適用し、必要に応じてアニメーション中にスクロールバーのスタイルを調整する必要がある場合があります。

このトリックをしてくれた@KeyFramersのStephen Shaw氏に感謝します。私がCodepenで何かに取り組んでいる間、私は彼を引っ張ってこの問題を解決するのを手伝いました。このトリックをCodepenチャンネルビデオに変換して、コラボレーションモードを表示することにしました。これを使用して問題/ソリューションを見つけました。

以上がアニメーション中にスクロールバーを非表示にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。