バイナリプロパティ（例：可視性）に関するCSSの遷移

Question

可視性hiddenとvisibleの間で移行するときに奇妙な動作が検出されました。 visibleに行くときのように、それはすぐに移行期間の開始時にvisibleになります。しかし、hiddenに戻って、遷移期間が終了するまで待ってから消えます。

この理由は何ですか？これは私が頼りにできるものなのですか、明示的に移行遅延を設定すべきですか？

the W3 for CSS Transitionsから：それはvisibleプロパティを移行するための推奨される実装であるため

Answer 1

この理由は

視認性：のいずれかの値は、離散として補間、「可視」である場合ステップ0と1との間のタイミング関数の値は、タイミング関数の「可視」および他の値にマッピングされる（これは、遷移の開始/終了時にのみ、または「cubic-bezier（）」関数の結果としてY [0、1]の外側の値）は、より近いエンドポイントにマップされます。いずれの値も '可視'でない場合は補間できません。

基本的には、遷移パーセンテージが0.00（または1.00）でない場合にはvisibleが使用されます。したがって、移行率がたとえば10％（0.1）であれば、それは見えます。それがすぐに見えるようになっている理由です。他の値は、トランジション中にvisibleが使用されるため、トランジションが完全に完了するまで認識されません。

あなたのユースケースに応じて、transition-delayを使用することができ、あなたがopacityプロパティを移行できる、またはあなたがcubic-bezier機能を使用しようとすることができ、キーフレームanimationを使用することができます。