複数のcss3トランジションコンフリクト

Question

サブナビゲーションが表示されるときにCSS3のドロップダウンメニューと素晴らしいアニメーションが表示されるメインナビゲーションがあります。

私は同じページにCSS3の項目でもあるスライダ（フレックススライダ）を持っています。

私の問題は、アニメーションが互いに干渉していることです。ナビゲーション項目の上にマウスを移動すると、その項目のサブナビメニューが表示され、スライダが次の画像にスライドするように設定されるので、両方のアニメーションは互いに独立しているのではなく同時に発生します。 http://supermarchepa.com/v3/eng/index.html

乾杯：

は、ここで私が話しているページへのリンクです。

Answer 1

Safariはアニメーションvisibilityが好きではないようですが、必要なプロパティのみをアニメーション化してみてください。

nav ul#nav ul { 
-webkit-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
-moz-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
-ms-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
-o-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
transition: opacity .2s ease-in-out, margin-top .2s ease-in-out; 
} 

これで問題は解決します。それは確かに非常に奇妙なバグですが。