转换 CSS3 不起作用

Question

我正在尝试 w3schools 中的示例：http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 但我在我的 CSS 中做了同样的事情，但它不起作用。

CSS:

 nav > ul > li{
     display: inline-block; 
     padding: 0px; 
     margin: 0px;  
     transition: width 2s;
 }

 nav > ul > li:hover{
     width: 20%; 
 }

悬停没有问题，但过渡没有...这应该很容易

Answer 1

如果没有起始值和结束值，浏览器通常无法转换元素的属性。给它一个初始宽度。

nav > ul > li {
    width: 100px;

您会注意到，如果您从 the example you gave 中删除初始宽度，过渡将停止运行。

Answer 2

在应用transition

之前，您需要定义元素的initial/start width

Demo

nav > ul > li {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    transition: width 2s;
    background: #f00;
    width: 0; /* Add this */
}

nav > ul > li:hover {
    width: 20%;
}

一些小技巧 :

如果值为 0，则不要使用 px，因此单位无关紧要。
我希望你知道你正在使用 inline-block 所以 white-space 会发生
如果不需要，不要使用太具体的选择器，将 class 分配给 parent 元素以唯一标识该元素。所以不用写 ~~nav > ul > li~~ 你可以写 .some-class-nav > li。如果您确定您的 li 项目不会有 child li

>

转换 CSS3 不起作用

Transition CSS3 does not work

html

css

transitions