kostenloser Webspace werbefrei: lima-city


CSS3 Transition: Height

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mermadalis

    Kostenloser Webspace von mermadalis

    mermadalis hat kostenlosen Webspace.

    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. 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. $('#'+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 Kostenloser Webspace von daswing

    daswing hat kostenlosen Webspace.

    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. 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?

Über lima-city

Login zum Webhosting ohne Werbung!