Html Css从显示无到显示块的转换，使用subnav导航

这就是我所拥有的

nav.main ul{
位置：绝对位置；
列表样式：无；
显示：无；
不透明度：0；
可见性：隐藏；
填充：10px；
背景色：rgba（92,91,87,0.9）；
-webkit转换：不透明度600ms，可见性600ms；
过渡：不透明度600ms，可见性600ms；
}
主导航ul li：悬停ul{
显示：块；
能见度：可见；
不透明度：1；
}

正如您所知，

显示

属性无法设置动画，但只要将其放在CSS中，它就会覆盖

可见性

和

不透明度

转换

解决方案…刚刚删除了

显示

属性

nav.main ul{
位置：绝对位置；
列表样式：无；
不透明度：0；
可见性：隐藏；
填充：10px；
背景色：rgba（92,91,87,0.9）；
-webkit转换：不透明度600ms，可见性600ms；
过渡：不透明度600ms，可见性600ms；
}
主导航ul li：悬停ul{
能见度：可见；
不透明度：1；
}

您可以使用动画关键帧而不是过渡来完成此操作。更改悬停声明并添加动画关键帧，可能还需要为-moz-和-webkit-添加浏览器前缀。有关更多详细信息，请参阅

nav.main ul{
位置：绝对位置；
列表样式：无；
显示：无；
不透明度：0；
可见性：隐藏；
填充：10px；
背景色：rgba（92,91,87,0.9）；
-webkit转换：不透明度600ms，可见性600ms；
过渡：不透明度600ms，可见性600ms；
}
主导航ul li：悬停ul{
显示：块；
能见度：可见；
不透明度：1；
动画：淡入1秒；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}

通常，当人们试图制作动画时，显示：无他们真正想要的是：

淡入内容，然后

隐藏项目时不要占用文档中的空间

大多数流行的答案使用

可见性

，这只能实现第一个目标，但幸运的是，使用

位置

同样容易实现这两个目标

由于

position:absolute

从键入文档流间距中删除了元素，因此可以在

position:absolute

和

position:static

（全局默认值）之间切换，并结合

不透明度

。请参见下面的示例

。内容页{
位置：绝对位置；
不透明度：0；
}
.content-page.active{
位置：静态；
不透明度：1；
过渡：不透明度1s线性；
}

如果删除显示属性，淡入淡出过渡对我来说很有效：@JamesWaddington这就是我一直在说的。为什么不使用Jquery show and hide来实现呢？然后，你可以做你的动画。是的，但是ul将以这种方式占用dom中的空间。这不重要，因为你使用的是绝对定位，它将元素从正常文档流中移除。这是另一篇类似于你的。删除

显示：无

和

可见性：隐藏

。是的，但这会导致奇怪的可点击但不可见的链接。如果其他元素在同一空间中，它可能会中断它们。此外，使用键盘导航也会中断，因为四处切换会选择不可见的链接（因此对用户没有可见的效果，至少可以说是令人困惑）。这非常聪明。显示：无-->块无法设置动画，但添加可见性：隐藏-->可见将触发该块。酷@Drenai:visibility:hidden在哪里使用？@DanDascalescu我已经更新了答案，包括基本样式，这是唯一可行的答案！按照其他人的建议，玩position

absolute

或

static

是错误的！如果您使用此解决方案，请记住它仅适用于淡入。淡出不起作用，因为display:none会立即应用。如果我在父元素上使用

display:flex

，使内容垂直居中（淡出/淡入），该怎么办

position:absolute

会将其打断。还有其他方法可以垂直居中，例如使用行高、视图高度或jquery/javascript。或者可以在flex显示的父对象中创建子对象？如果可以创建子对象，您有什么建议？不适用于iOS Safari:-/我个人喜欢避免使用JS计时器。因此，淡入不透明度，然后设置显示：无；那太好了。