CSS 过渡应用于被推送的元素

Question

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

如果您转到 http://new.therepairshack.com 并查看顶部搜索栏。

当您将鼠标悬停在它上面时，它会根据内容宽度调整大小。

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 会立即跳到更大的高度以适应调整后的搜索栏，但是当它在你离开悬停后重新调整大小时它会顺利地完成。

我的问题：有没有办法让跳跃消失？这让我发疯。当调整搜索栏大小时，我已经为所有正在移动的元素添加了一个过渡，但它不起作用。

此外，在其他浏览器中使其正常工作的最佳方法是什么？谢谢！！！

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

Answer 1

您必须手动设置 .header-top-container 的高度 class 并针对悬停状态进行相应调整。

CSS 按照标准只会将动画应用于规则中定义的元素以应用它们。此外，只有在有开始和结束结果时才会应用过渡，因此推断值（例如高度和宽度）将无法设置动画。请注意，我没有说 inherited 值，因为这些值在技术上具有起始值，因此是可动画的。

所以对于您的 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 */
}

Answer 2

无法从未定义的起点过渡。您必须

在 .search-wrapper 上指定初始高度
http://jsfiddle.net/5h69j6uq/

或者，如果您的内容必须动态调整大小，请使用 min-height: 100px 属性而不是 height: 100px 属性来设置更新后的高度。 min-height 的默认值为 0，因此将从该定义的默认值过渡到 100px
http://jsfiddle.net/8t1beeLo/

CSS 过渡应用于被推送的元素

CSS Transition apply to Elements being pushed

html

css

css-transitions