nicht angemeldet
Frage zu transition und position
JürgenB
Frage zu transition und position
JürgenB
Hallo,
ich habe ein DIV "irgendwo" auf der Seite im Seitenfluss. Bei einer Aktion, z.B. hover soll das div fast seitenfüllend werden, also position -> absolute, top und left -> 2% und width und height -> 96%. Damit das sanft passiert, habe ich transitions verwendet:
.m { width:200px;height:200px;margin:20px;display:inline-block }
.JBmapdiv { width:100%;height:100%;
transition: width 2s, height 2s, left 2s, top 2s, position 2s }
.JBmapdiv:hover { position:absolute;top:2%;left:2%;width:96%;height:96%;z-index:500;margin:0;
transition: width 2s, height 2s, left 2s, top 2s, position 2s}
<div class="m" id="m1"><div class="JBmapdiv">...</div></div>
Das klappt aber leider nicht. Da sich ja eigentlich nur die position ändert, hat die transition auf width und height fast keinen Einfluss (100% -> 96%) und top und left springen auf 2%.
Gibt es da einen Trick, wie ich das div sanft von seiner Position in der Seite auf volle Größe übergehen lassen kann?
Gruß, Jürgen
-
Hallo,
Gibt es da einen Trick, wie ich das div sanft von seiner Position in der Seite auf volle Größe übergehen lassen kann?
So etwas ist m.W. nicht mit einer simplen CSS-Transition möglich.
- Der Übergang von position: static zu position: absolute kann nicht animiert werden.
- Selbst wenn, der Übergang von left/right: auto zu left/right: 0 kann nicht animiert werden.
- Prozentwerte für width und height sind prinzipiell animierbar, aber durch den Übergang von position: static zu absolute ändert sich die Bezugs-Box.
Der Effekt, den du willst, lässt sich nur durch eine Reihe von CSS-Änderungen mit JavaScript erreichen. Die Hauptanimation kann vermutlich mit einer Transition erfolgen. Etwa so:
X/Y-Position und Größe der Box abfragen. Das Element klonen und den Klon an der zuvor abgefragten Stelle mit einem höheren z-index positionieren sowie die Höhe und Breite setzen (top, left, width und height auf Pixelwerte setzen). Nun die Viewport-Breite auslesen. transition: top 2s, left 2s, width 2s, height 2s; setzen. Nun die Zielwerte setzen (top und left auf 0, width und height auf Viewport-Größe in Pixeln). Der Browser sollte nun animieren. Falls das nicht klappt, würde ich top, left, bottom, right probieren.
CSS-Transitions sind leider ziemlich unbrauchbar, wenn es darum geht, Elemente mit dynamischen Größen zu animieren. Das Animieren selbst lässt sich zwar mit CSS-Transitions lösen, aber ein JavaScript muss zuvor eine Menge vorbereiten, Inline-Styles in Pixeln setzen und nach der Animation wieder aufräumen. Siehe z.B. die slideDown/slideUp für Zepto.
Mathias
-
Hallo Mathias,
vielen Dank, das habe ich schon befürchtet. Da werde ich mir wohl eine JS-Lösung basteln müssen.
Gruß, Jürgen