为什么这些元素不褪色/过渡

Question

我已经做了一个小导航，在将鼠标悬停在房屋上方时，我想让它用transition: 0.4s;慢慢向左滑出，但它不想做任何事情，我已经将它应用于每个元素只是为了表明无论如何它都不起作用。

有人知道如何解决这个问题吗？也许是因为position: fixed;？

我做了一个jsfiddle，请记住，它只是我网站的片段，没有美学风格。

提前感谢！

Answer 1

不能对display属性进行转换。

Answer 2

不能对display属性进行转换。

这是一个 jsFiddle，它使用max-width上的过渡来允许发生过渡。

.desktopnav > ul > .dropdown > .dropdown-content {
float: left;
transition: max-width 0.4s;
overflow: hidden;
max-width: 0px;
}
.desktopnav >ul > .dropdown:hover .dropdown-content {
display: block;
max-width: 500px;
}

您将需要更多 CSS 来隐藏不需要的视觉效果，并强制列表项在顶部保持对齐。

你对 ul/li 的使用有点不对劲，li应该只是ul元素的子元素，而不是section元素，ul应该只有li元素作为子元素。

Answer 3

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

这是可以进行动画处理的属性列表。显示不是其中之一。这就是为什么你没有看到转变。

Answer 4

不能对display属性进行动画处理。如果要实现"向左滑动"效果，则必须对max-width属性进行动画处理。

我已经分叉了你的小提琴来说明这一点：https://jsfiddle.net/w811wvfp/1/

基本上我所做的是：

.desktopnav > ul > .dropdown {
...
white-space: nowrap;
}
.desktopnav > ul > .dropdown > .dropdown-content {
...
max-width: 0;
white-space: nowrap;
overflow: hidden;
}
.desktopnav > ul > .dropdown:hover .dropdown-content {
max-width: 1000px;
}