Question

我做了一点导航，当我在家里面盘旋时，我想让它慢慢向左滑动transition: 0.4s;，但它不想做任何事情，我已经做过了将它应用于每个元素只是为了表明它无论如何都不起作用。

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

我制作了jsfiddle，请记住，它只是我网站的一小部分，并且没有美学风格。

提前致谢！

Answer 1

您无法在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 1}}元素作为孩子。

Answer 2

您无法在display属性上进行转换。

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;
}

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

4 个答案: