CSS转换(高度属性) - 无法从底部滚动

Question

我使用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

Answer 1

在不使用绝对定位或更改标记的情况下执行此操作的一种方法margin-top是在高度的同时转换a .所以你的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 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;
}