CSS-übergang (Höhe) - kann nicht es zu Rollen, von unten

Ich benutze height-Eigenschaft zu animieren, DIV, erscheint es auf hover von einem anderen element, es "rollt" von oben. Gibt es eine Möglichkeit, drehen Sie die animation, so würde ich es für angezeigt, von unten nach oben?

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

Scheint ähnlich zu stackoverflow.com/questions/10247255/.... Ändern Sie einfach die .animieren.gehen Sie in die Geige zu animieren.verschieben { bottom: 100%; margin-top: -100px; /*.animieren der Breite*/ } Nicht genau, was Ihr sucht, aber vielleicht schicken Sie Sie in die richtige Richtung
Nicht ohne änderung der Belegfluss durch die Verwendung von absoluter Positionierung.

InformationsquelleAutor freewheeler | 2015-05-28

Einen Weg, dies zu tun, ohne absolute Positionierung oder verändern Sie Ihr markup ist für den übergang eine margin-top zur gleichen Zeit wie die Höhe. Also dein CSS könnte so Aussehen:

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;
}

HTML:

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

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

Hier ist auch ein JSFiddle zu demonstrieren. (Wenn ich falsch verstanden habe, Ihre Absichten, sagen Sie mir bitte.)

Hoffe, das hilft! Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.

InformationsquelleAutor Serlite

Kasse der Geige https://jsfiddle.net/8paj437a/2/

Ich position:absolute auf die #erscheinen div. und bottom:0; so wird es dauern, Höhe von Boden.

Und halten Sie es intakt von oben. Ich legte es in einen Behälter und geben die position relativ zum container.

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;
}

InformationsquelleAutor Nilesh Mahajan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.