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类的高度，并根据悬停状态进行相应调整。

CSS by standard仅将动画应用于规则中定义的元素以应用它们。此外，只有在有开始和结束结果时才会应用过渡，因此推断的值（如高度和宽度）将无法生成动画。注意到我没有说继承的值，因为这些值在技术上具有起始值，因此是可动画的。

因此，对于您的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 Transition适用于被推送的元素

2 个答案: