私が知っている、これはあなたの質問の解決策ではありません
ディスプレイ+不透明度
私のアプローチはより一般的な質問を解決しますが、おそらくこれをdisplay
と組み合わせて使用することで解決する必要がある背景の問題でしたopacity
。
要素が見えないときに邪魔にならないようにしたかったのです。このソリューションはまさにそれを実行します:要素を離れた場所に移動し、これを遷移に使用できます:
.child {
left: -2000px;
opacity: 0;
visibility: hidden;
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}
.parent:hover .child {
left: 0;
opacity: 1;
visibility: visible;
transition: left 0s, visibility 0s, opacity 0.8s;
}
このコードには、ブラウザのプレフィックスや下位互換性のハックは含まれていません。エレメントは不要になったため、エレメントをどのように移動するかという概念を示しているだけです。
興味深い部分は、2つの異なる遷移定義です。マウスポインターが.parent
要素をホバーしているとき、要素を.child
すぐに配置する必要があり、不透明度が変更されます。
transition: left 0s, visibility 0s, opacity 0.8s;
ホバーがない場合、またはマウスポインターが要素の外に移動された場合、不透明度の変更が完了するまで待ってから、要素を画面の外に移動できます。
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
オブジェクトを遠ざけることは、設定display:none
がレイアウトを壊さない場合に実行可能な代替手段になります。
答えはしなかったのですが、この質問の頭に釘を打ってください。