转换 CSS3 不起作用

Transition CSS3 does not work

我正在尝试 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%; 
 }

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

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

nav > ul > li {
    width: 100px;

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

在应用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
  • ,您也可以摆脱 >