Question

所以基本上我得到了这种转变。在开始时高度为0，当您悬停时，DIV指定的高度变为100px。

一切顺利，高度从顶部开始。

如何从底部开始？这就是我的意思。

http://i.stack.imgur.com/HHBVY.gif

那我怎样才能让它从下滑到上去？

这是我正在使用的CSS。

.bd-box tr td .bd-name {
    background: rgba(186,0,0,.8);
    width: 100px;
    height: 0;
    text-align: center;
    margin-top: -20px;
    position: absolute;
    opacity: 1;
    transition: .3s ease-in-out;
    overflow:  hidden;
}
.bd-box tr td:hover .bd-name {
    height: 20px;
}

Answer 1

使用定位并向上移动元素而不是改变高度。

div
{
    width: 100px;
    height: 100px;
    position: relative;

    background: black;
    overflow: hidden;
}

div div
{
    background: red;
    position: absolute;
    top: 100px;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

div:hover div
{
    top: 80px;
}

如何进行从低到高的过渡滑动而不是向下滑动

1 个答案:

JSFiddle