CSS-Transitions Teil 3: Beispiele mit JavaScript

Zu Beginn wieder eine Spielerei 🙂

Rakete!

Via jQuery wird über den Button eine Klasse zweier Container (für die Rakete und den Hintergrund) getoggelt, bei denen die Position mittels CSS Transition animiert wird.

Es gibt aber auch sinnvolle Beispiele, z.B. beim Button-Design: Auch hier auf der Seite wird übrigens der Menü-Button via toggleClass() und CSS Transitions animiert:

Und das geht "recht einfach": Der Button besteht lediglich aus zwei divs, einem für den Button und einem für das "Hamburger" -Icon

<div id="bsp_menutoggle">
  <div class="bsp_menutoggleicons"></div>
</div>

Bei click wird nun die Klasse bsp_menu_open getoggelt. Die aria-Attribute könnte man hier im Beispiel auch weglassen, bei Produktiv-Umsetzungen würde ich sie aber immer setzen.

$(document).ready(function(){
  $( "#bsp_menutoggle" ).on( "click" , function(e) {
    //Klasse zu Button hinzufügen
    $(this).toggleClass( "bsp_menu_open" );

    //aria-expanded-Status bei Klick togglen
    var ariaState = $( e.currentTarget );
      if (ariaState.attr( 'aria-expanded' ) === 'true' ) {
        $(this).attr( 'aria-expanded', 'false' );
      } else {
        $(this).attr( 'aria-expanded', 'true');
      }
    return false;
  });
});

Und dann das ganze stylen. Der Button hat eine feste Breite und Höhe von 100px, das Hamburger-Icon besteht aus dem div und einem :before und einem :after-Element. Die unterschiedlichen Breiten (70% für das "Haupt"-div vs. 100% für die Pseudo-Elemente) erklären sich dadurch, dass Pseudo-Element-Maße sich immer auf das Maß des Elements beziehen, denen sie angehängt sind und nicht auf das Elternelement.

Bei getoggelter Klasse wird nun der mittlere Hamburger-Strich "unsichtbar" (erhält die gleiche Farbe wie der Hindergrund) und die beiden anderen Striche werden gefärbt und gedreht, so dass sich ein "Schließen"-X ergibt. Das ganze an den richtigen Stellen mit einer Transition verfeinern: Fertig.

/* Button */
#bsp_menutoggle {
  width: 100px;
  height: 100px;
  background: #bf304a;
  border: 0;
  padding: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hamburger */
#bsp_menutoggle .bsp_menutoggleicons,
#bsp_menutoggle .bsp_menutoggleicons::before,
#bsp_menutoggle .bsp_menutoggleicons::after {
  width: 70%;
  height: 10px;
  background: #ffe5ea;
  margin: 0 auto;
  transition: all 0.3s ease;
  position: relative;
  top: calc(50% - 5px);
}
#bsp_menutoggle .bsp_menutoggleicons::before,
#bsp_menutoggle .bsp_menutoggleicons::after {
  content:"";
  width: 100%;
  position: absolute;
  transition: all 0.3s ease; 
}
#bsp_menutoggle .bsp_menutoggleicons::before {top: -25px;}
#bsp_menutoggle .bsp_menutoggleicons::after {top: 25px;}

/* Button 'active' */
#bsp_menutoggle.bsp_menu_open {background:ffe5ea;}

/* mittlerer Strich verschwindet, da Vorder- = Hintergrundfarbe */
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons {background: ffe5ea;}

/* oberer und unterer Strich werden rot ... */
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::before,
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::after {
  background:#bf304a;
}

/* ... und gedreht */
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::before {
  transform: rotate(45deg);
  top: 0;
}
#bsp_menutoggle.bsp_menu_open .bsp_menutoggleicons::after {
  transform: rotate(-45deg);
  top: 0;
}

Das ist vor allen Dingen eine Menge "Schreibarbeit", der Effekt ist aber ganz ansehlich 🙂

Der "Schrumpfheader" ist schon fast wieder aus der Mode, aber er ist ein hübsches Beispiel für die JavaScript-basierte Klassenzuweisung und die Animation dieser Klassenänderung via CSS-Transition. Ich selber benutze den Schrumpfheader immer noch gerne, um auf Endgeräten mit kleineren Viewports Platz zu schaffen.

Darüber hinaus sind diese "Scroll-to-Top"-Buttons, die ab einer festgelegten erreichten "Scroll-down"-Position eingeblendet werden, ebenfalls so zu realisieren: JavaScript übernimmt die Klassenzuweisung an Header und Button sowie die Scroll-to-Top-Animation, CSS übernimmt die Ein- und Ausblendungen bzw. Schrumpfanimationen:

Nächstes Beispiel: Ein Impressums wird mit CSS-Transitions in einer Lightbox eingeblendet (würde ich wohl eher als reine CSS-Lösung bauen, um überflüssiges JavaScript zu vermeiden):