CSS过渡（高度属性） - 不能让它从底部滚动答案

【问题标题】：CSS transition (height property) - can't get it to roll from bottomCSS过渡（高度属性） - 不能让它从底部滚动
【发布时间】：2015-08-11 01:33:39
【问题描述】：

我使用 height 属性为我的 DIV 设置动画，它出现在另一个元素的悬停上 - 它从顶部“滚动”。有没有办法旋转动画，所以我会让它从下到上出现？

HTML：

<a href="#" class="show">SHOW IT</a>

<div id="appear">
    <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

CSS：

#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
    height: 331px;
}

JSFiddle

【问题讨论】：

看起来类似于stackoverflow.com/questions/10247255/…。只需将该小提琴中的 .animate.move 更改为 animate.move { bottom: 100%;边距顶部：-100px； /*.animate width*/ } 不完全是您想要的，但可能会引导您朝着正确的方向前进
在不改变文档流的情况下使用绝对定位。

标签： css transition

【解决方案1】：

不使用绝对定位或更改标记的一种方法是在转换高度的同时转换margin-top。所以你的 CSS 可能看起来像：

html, body { background-color: #dedede; }

#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    margin-top:331px;
}
.show:hover + #appear, #appear:hover {
    margin-top:0;
    height:331px;
}

<a href="#" class="show">SHOW IT</a>

<div id="appear">
    <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

这里还有一个JSFiddle 来演示。（如果我误解了你的意图，请告诉我。）

希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：

【解决方案2】：

检查小提琴https://jsfiddle.net/8paj437a/2/

我将position:absolute 设置为#appear div。和bottom:0;，所以它会从底部取高度。

并从顶部保持完整。我把它放在一个容器中，并给出相对于容器的位置。

HTML

<a href="#" class="show">SHOW IT</a>

<div class="container">
    <div id="appear">
        <img src="http://data.atria.sk/matmenu/celevyk.jpg" />
    </div>
</div>

CSS

.container {
    width: 308px;
    height:331px;
    position:relative;
}
#appear {
    width: 308px;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    position:absolute;
    left:0;
    bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
    height: 331px;
}

【讨论】：