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

在应用width

之前，您需要定义元素的初始/开始transition

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

一些提示：

如果值为px，请不要使用0，因此单位不重要。
我希望您知道您正在使用inline-block，因此会出现空格
如果不需要，请不要使用过于具体的选择器，将class分配给父元素以唯一标识该元素。因此，您可以编写nav > ul > li而不是编写 ~~.some-class-nav > li~~ 。如果您确定自己的>项目没有生成孩子li

li

过渡CSS3不起作用

2 个答案: