Przejście CSS (właściwość wysokości) - nie można zmusić go do przejścia z dołu - css, css3, transition

Używam właściwości height do animowania mojego DIV, pojawia się on na wskaźniku na innym elemencie - „przewraca” się od góry. Czy istnieje sposób na obrócenie animacji, aby uzyskać jej wyświetlanie od dołu do góry?

HTML:

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

<div id="appear">
<img src="/images/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

Odpowiedzi:

Jednym ze sposobów, aby to zrobić bez użycia pozycjonowania bezwzględnego lub zmiany znaczników, jest przejście margin-top w tym samym czasie co wysokość. Więc twój CSS może wyglądać tak:

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="/images/http://data.atria.sk/matmenu/celevyk.jpg" />
</div>

Oto także a JSFiddle wykazać. (Jeśli źle zrozumiałem twoje intencje, powiedz mi.)

Mam nadzieję że to pomoże! Daj mi znać, jeśli masz jakieś pytania.

wymień skrzypce https://jsfiddle.net/8paj437a/2/

ustawiłem position:absolute do div #appear. i bottom:0; więc zajmie wysokość od dołu.

I aby utrzymać go w nienaruszonym stanie od góry. Umieściłem go w pojemniku i podałem pozycję względem pojemnika.

HTML

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

<div class="container">
<div id="appear">
<img src="/images/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;
}