CSS transition (height 属性) - 无法让它从底部滚动

Question

我使用高度属性为我的 DIV 设置动画，它出现在另一个元素的悬停上 - 它从顶部 "rolls"。有没有办法旋转动画，让它从下到上显示？

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

Answer 1

查看 fiddle 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;
}

Answer 2

在不使用绝对定位或更改标记的情况下执行此操作的一种方法是在高度的同时转换 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来演示一下。（如果我误解了你的意图，请告诉我。）

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

Answer 3

默认情况下，高度过渡从上到下进行。但是你可以用一个非常简单的技巧让它从 bottom to top 开始工作。您只需将 div 旋转为 180 degrees。这也将旋转过渡方向。在你的 div.

上试试这个 css

transform: rotate(180deg);

CSS transition (height 属性) - 无法让它从底部滚动

CSS transition (height property) - can't get it to roll from bottom

css

transition