CSS 过渡适用于被推送的元素答案

【问题标题】：CSS Transition apply to Elements being pushedCSS 过渡适用于被推送的元素
【发布时间】：2015-03-20 14:11:04
【问题描述】：

我遇到了（希望如此）一个简单的 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 会立即跳到更大的高度以适应调整后的搜索栏，但是当它在您离开悬停后重新调整大小时，它会顺利进行。

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

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

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

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

它不能从未定义的起点过渡。你必须要么

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

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

【讨论】：

【解决方案2】：

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

按照标准，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 */
}

【讨论】：