kostenloser Webspace werbefrei: lima-city

CSS3 Transition: Height

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mermadalis

   

   mermadalis hat kostenlosen Webspace.

   1:02, 2.6.2012

   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!

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. pcw

   pcw hat kostenlosen Webspace.

   6:43, 2.6.2012

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

   
   
   

4. imho

   

   imho hat kostenlosen Webspace.

   9:30, 2.6.2012

   $('#'+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
   
   Beitrag zuletzt geändert: 2.6.2012 9:32:22 von imho

5. daswing

   Moderator

   daswing hat kostenlosen Webspace.

   13:31, 2.6.2012

   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

6. imho

   

   imho hat kostenlosen Webspace.

   14:46, 2.6.2012

   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

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?