多个css3过渡冲突

Question

我有一个主导航，这是一个仅限CSS3的下拉菜单，当子弹出现时，动画效果很好。

我也在同一页面上有一个滑块（flexslider），它也是一个仅限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;
}

这将解决您的问题。虽然这确实是一个非常奇怪的错误。