CSS3 Transition: Height
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
angabe
anzeige
code
container
dank
effekt
funktion
inhalt
jemand
kleinen design
ladezeit
langer artikel
live beispiel
nachteil
pixel
realisieren
technik
url
verwenden
-
Hallo zusammen,
Ich arbeite gerade an einem kleinen Design für eine Homepage. Der Inhalt dieser ist wie folgt aufgebaut:
<div id="wrapper"> <div id="content"> ... </div> </div>
Der in content stehende Inhalt wird per AJAX aktualisiert. Nun ist es aber so, dass z.B. zunächst im content ein langer Artikel angezeigt wird, der beispielsweise 500 Pixel Höhe einnimmt.
Wird nun per AJAX aktualisiert und eine signifikant kleinere Seite angezeigt (z.B. nur 100 Pixel Höhe), so ändert sich die Höhe des angezeigten wrapper-Containers sprunghaft.
Ich möchte aber, dass die Höhe des wrapper-Containers nach und nach der Höhe des neuen Inhalts angepasst wird, also wie bei einer CSS3-Transition.
Hierzu habe ich folgendes Stylesheet hinzugefügt:
#wrapper { transition: height 0.5s; -moz-transition: height 0.5s; -webkit-transition: height 0.5s; -o-transition: height 0.5s; }
Leider hat das gar keinen Effekt auf die Anzeige, die sich weiterhin sprunghaft ändert.
Hat jemand eine Idee, wie ich das realisieren könnte?
Danke schonmal! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Guten Morgen.
Ein Live-Beispiel wäre nicht schlecht.
Du musst auch angeben auf welche Höhe die Transition angewendet werden soll.
Also bspw. mal als Hoover Effekt.:
#wrapper { height: 500px; -webkit-transition: height 0.5s; .... } #wrapper:hover { height: 250px; }
-
Die Höhe richtet sich doch sowieso nach Inhalt, so lange du keine Angabe nutzt. Heißt du haust die Höhenangabe raus und fügst in deinem CSS für deine Klasse einfach folgendes ein.
-webkit-transition:All 1.0s ease-in-out; -moz-transition:All 1.0s ease-in-out; -ms-transition:All 1.0s ease-in-out; -o-transition:All 1.0s ease-in-out; transition:All 1.0s ease-in-out;
Danach ändert sich mit Höhe in Abhängigkeit zum Inhalt.
imho schrieb:
$('#'+id).animate({ width:600, height:160 }, 2500);
Du verwendest doch warsch sowieso Jquery für AJAX, also würde ich aufgrund der höheren Kompabilität mit älteren Browsern die Jquery eigene animate Funktion verwenden
jQuery(so wird das geschrieben) hat genauso viele Vor- und Nachteile wie CSS3. Von daher ist es mittlerweile egal.
mfg Stephan
Beitrag zuletzt geändert: 2.6.2012 13:33:30 von daswing -
daswing schrieb:
jQuery(so wird das geschrieben) hat genauso viele Vor- und Nachteile wie CSS3. Von daher ist es mittlerweile egal.
In diesem Fall nicht, JQuery wird sowieso verwendet für Ajax, (Nachteil der Ladezeit entfällt) und der Browsersupport ist wesentlich besser, nichmal der IE9 unterstützt css-transitions, von daher würde ich vom Einsatz der Technik noch abraten, sonst sehen mehr als 25% der Benutzer die Seite falsch -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage