Html CSS转换应用于被推送的元素

我（希望）遇到了一个简单的CSS问题，我无法工作

如果您转到并查看顶部搜索栏

当您将鼠标悬停在其上时，它将调整为内容宽度

这方面的CSS如下所示：

.header .search-wrapper .form-search .input-text {
    background:rgba(0,0,0,0);
    color:#000;
    border-radius:0px;
    border-bottom:1px solid #444;
}

.header .search-wrapper:hover,
.header .search-wrapper:hover .form-search,
.header .search-wrapper:hover form,
.header .search-wrapper:hover .input-text {
    width:100%;
    font-size:45px;
    height:100px;
}

.header .search-wrapper,
.header .search-wrapper form,
.header .search-wrapper .form-search,
.header .search-wrapper .input-text {
    transition: all 1.0s ease;
    -webkit-transition: all 1.0s ease;
    display:block;
}

现在，我们正致力于在Chrome和Firefox中实现这一功能。当我在chrome中查看它时，背景div会立即跳到一个更大的高度，以适应调整大小的搜索栏，但当它在您离开鼠标悬停后重新调整大小时，它会平滑地执行

我的问题：有没有办法让跳跃消失？它快把我逼疯了。我已经为搜索栏调整大小时移动的所有元素添加了一个转换，但该转换不起作用

另外，在其他浏览器中，让它正常工作的最佳方法是什么？谢谢

---

如果您需要更多信息，请告诉我

您必须手动设置.header top容器类的高度，并根据悬停状态进行相应调整

CSS标准只会将动画应用到规则中定义的元素，以便应用它们。此外，只有在有开始和结束结果时才会应用变换，因此推断的值（如高度和宽度）将不可设置动画。注意，我没有说继承的值，因为这些值在技术上有一个起始值，因此是可动画的

因此，对于您的CSS，您需要这样的效果：

.header-top-container {
    transition: height 1.0s ease;
    -webkit-transition: height 1.0s ease;
    height: 50px; /* change to whatever your height should be */
}

.header-top-container:hover {
    height: 100px; /* the new height of the background */
}

---

它不能从未定义的起点转换。 你要么

在.search包装上指定初始高度

或者，如果您的内容必须动态调整大小，请使用

min height:100px

属性而不是

height:100px

属性来设置更新的高度<代码>最小高度的默认值为0，因此将从定义的默认值转换为100px