jquery - CSS 缓出过渡不起作用

Question

我正在开发网站 http://goo.gl/cgR84k

顶部搜索栏，我有如下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 input {
    width: 200px;
}

过渡将考虑新旧宽度之间的差异。