Question

的开发网站上工作

顶部搜索栏，我的CSS如下：

#header #search input {
    height: 33px;
    font-size: 15px;
    padding: 2px 37px 2px 12px;
    border-radius: 7px;
    color: #919191;
    background-color: #fff;
    border: 1px solid #dadada;
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
     transition: width 0.5s ease-out;
}

#header #search input:focus {
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width: 384px;
}

转换/缓动效果在任何浏览器中都不起作用 - 奇怪的是，我在prestashop的搜索输入上使用了完全相同的代码并且它运行良好，现在使用opencart它无法正常工作。

请问有人可以为我解释一下吗？

Answer 1

您没有在基本状态上设置宽度，因此浏览器无法进行数学运算。

为#header #search输入

添加基本宽度

说，200px。

Answer 2

在输入上设置起始宽度。

#header #search input {
    width: 200px;
}

然后转换将考虑旧宽度和新宽度之间的差异。

Answer 3

工作小提琴：http://jsfiddle.net/LmCEY/

您忘记在焦点前指定宽度。

#header #search input {
    height: 33px;
    font-size: 15px;
    padding: 2px 37px 2px 12px;
    border-radius: 7px;
    color: #919191;
    background-color: #fff;
    border: 1px solid #dadada;
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width:100px;
}
#header #search input:focus {
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width: 384px;
}

CSS Ease-out转换不起作用

3 个答案: