Wie man Seitenübergänge mit CSS und smoothState.js hinzufügt

CSS-Animationen (und ein kleiner JavaScript-Trick) können uns ermöglichen, Seitenübergänge hinzuzufügen und uns vom harten Schnitt von Seitenaufrufen zu lösen. Mein jQuery-Plugin smoothState.js hilft dabei, diese Übergänge zu verfeinern und die Reaktionszeiten der Benutzeroberfläche zu verbessern.

Seitenübergänge verbessern die Benutzererfahrung

Stellen Sie sich für einen Moment vor, wie desorientierend es wäre, wenn Sie beim Berühren eines Türklinken zum anderen Ende der Tür teleportiert würden. Das Navigieren im Web fühlt sich an, als würde man eine teleportierende Türklinke benutzen. Layouts ändern sich, Elemente verschieben oder verschwinden, und es braucht Zeit für den Benutzer, sich anzupassen. Sanfte Übergänge reduzieren den Aufwand, den Benutzer benötigen, um sich in einer neuen Umgebung zurechtzufinden.

Native Apps verstehen die Bedeutung von Animationen. Es ist ungewöhnlich, eine App ohne Seitenübergänge zu finden, und Benutzer haben sich an dieses höhere Maß an Benutzerfreundlichkeit gewöhnt. Das Web beginnt sich aufgrund dieses Wandels der Erwartungen veraltet anzufühlen. Viele denken an das Web als eine unterlegene Erfahrung im Vergleich zu Apps. Glücklicherweise muss das nicht so sein.

Seitenübergänge mit CSS @keyframes-Animationen hinzufügen

Werfen wir einen Blick auf ein Beispiel, um zu sehen, wie wir mit dem Hinzufügen von Seitenübergängen beginnen könnten. In unserem Demo-Layout sehen wir die typischen weißen Blitzer und harten Schnitte von Webseiten.

CSS-Animationen ermöglichen es uns, das visuelle Verhalten eines Elements zu definieren, wenn es auf der Seite gerendert wird. Um unseren Seiten Animationen hinzuzufügen, sollten wir

1. Identifizieren, wie die Elemente auf der Seite animiert werden
2. Die benötigten Keyframes erstellen
3. Die CSS-Deklarationen schreiben
4. Klassen zum Layout hinzufügen

Identifizieren, wie die Elemente auf der Seite animiert werden

Betrachten wir unsere Beispielseite

Wenn wir das Layout untersuchen, können wir einige Möglichkeiten für das Hinzufügen von Übergängen erkennen. Googles Leitfaden zu bedeutungsvollen Übergängen ist eine gute Regel für Elementanimationen. Das ist ein guter Ausgangspunkt, wenn Sie neu im Interaktionsdesign sind.

Die benötigten @keyframes erstellen

Es sieht so aus, als bräuchten wir drei Arten von einzigartigen Animationen.

1. Eine Fade-In-Animation für den Header und den Button
2. Eine Slide-Up-Animation mit leichtem Fade für den Inhalt der Startseite
3. Eine Slide-In von rechts mit leichtem Fade für den Inhalt der Detailseite

Erstellen wir diese CSS @keyframes und benennen sie

/*
 * Keyframes
 */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

}

Die CSS-Deklarationen schreiben

Nachdem wir unsere Keyframes erstellt haben, müssen wir sie mit den CSS-Animationseigenschaften an Klassen binden. So sieht dieser CSS-Code aus

/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene {
  /** Basic styles for an animated element */
  .scene_element {
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  /** An element that fades in */
  .scene_element--fadein {
    animation-name: fadeIn;
  }

  /** An element that fades in and slides up */
  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  /** An element that fades in and slides from the right */
  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }
}

Es ist wichtig zu beachten, dass zu lange Animationen den Benutzer nerven werden. Es gab bereits einige Forschungsergebnisse zur Benutzerfreundlichkeit von Antwortzeiten. Um die Benutzeroberfläche reaktionsschnell zu halten, begrenzen Sie die Animationsdauer auf 0,25 Sekunden. Führen Sie schnelle, unkomplizierte Benutzertests durch, um sicherzustellen, dass Ihre Animationen nicht störend wirken.

Klassen zum Layout hinzufügen

Nachdem wir unseren CSS-Code geschrieben haben, ist es an der Zeit, die Klassen zum Markup hinzuzufügen.

<!-- Home page -->
<div class="m-scene" id="main">
  <div class="m-header scene_element scene_element--fadein">
    ...
  </div>
  <div class="m-page scene_element scene_element--fadeinup">
    ...
  </div>
</div>

<!-- Detail page -->
<div class="m-scene" id="main">
  <div class="m-aside scene_element scene_element--fadein">
    ...
  </div>
  <div class="m-right-panel m-page scene_element scene_element--fadeinright">
    ...
  </div>
</div>

Unser Ergebnis ist ein schönerer Einstieg in die Seiten

Wir haben mit reinem CSS einige Fortschritte auf unserer Seite gemacht. Aber selbst mit unseren Verbesserungen sehen wir immer noch den Blitz und die Animationen sind nicht so straff, wie sie sein könnten. Jetzt verwenden wir smoothState.js, um das zu beheben.

Verfeinerung mit smoothState.js hinzufügen

smoothState.js ist ein jQuery-Plugin, das Seitenaufrufe progressiv verbessert, um uns mehr Kontrolle über Seitenübergänge zu geben. Um es in unsere Seite einzubinden, müssen wir

1. Eine Kopie von jQuery besorgen und sie zu unserer Seite hinzufügen
2. smoothState.js herunterladen und es nach jQuery hinzufügen.
3. Eine neue .js-Datei erstellen und einbinden, nach smoothState.js, in der wir das Plugin ausführen können. (Oder verwenden Sie jedes Build-Tool / jeden Verkettungsprozess, den Sie zur Erledigung all dieser Aufgaben verwenden.)

In unserer neuen .js-Datei wollen wir smoothState auf einem Container mit einer ID initialisieren. Der Container sollte den gesamten Inhalt der Seite umschließen.

;(function ($) {
  'use strict';
  var content  = $('#main').smoothState({
        // onStart runs as soon as link has been activated
        onStart : {
          
          // Set the duration of our animation
          duration: 250,
          
          // Alterations to the page
          render: function () {

            // Quickly toggles a class and restarts css animations
            content.toggleAnimationClass('is-exiting');
          }
        }
      }).data('smoothState'); // makes public methods available
})(jQuery);

smoothState gibt uns Zugriff auf einen onStart.render() Callback, der es uns ermöglicht, die Art und Weise, wie Elemente die Seite verlassen, zu choreographieren. Wir können die harten Schnitte der Seite eliminieren, indem wir die Layout-Animationen umkehren, bevor neue Inhalte angezeigt werden. Um dies zu tun, führen Sie die Funktion .toggleAnimationClass() aus und übergeben Sie eine Klasse als erstes Argument. Jetzt deklarieren wir eine neue Animationsrichtung mit dieser Klasse.

/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene {
  .scene_element {
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  .scene_element--fadein {
    animation-name: fadeIn;
  }

  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }

  /** Reverse "exit" animations */
  &.is-exiting {
      .scene_element {
        animation-direction: alternate-reverse;
      }
  }
}

Wir möchten auch den Benutzer wieder an den Anfang der Seite animieren. Erreichen Sie dies, indem Sie die .animate() Funktion von jQuery verwenden und die Eigenschaft scrollTop auf 0 setzen.

;(function ($) {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection 
      content  = $('#main').smoothState({
        onStart : {
          duration: 250,
          render: function () {
            content.toggleAnimationClass('is-exiting');
            
            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
})(jQuery);

Das Endergebnis ist ein sanfter Übergang zwischen den Seiten unserer Website. Elemente betreten und verlassen die Seite elegant und der weiße Blitz ist verschwunden. Wir feuern die Animationen ab, noch bevor der Inhalt geladen ist, sodass der Benutzer eine sofortige Reaktion von der Seite sieht.

Repo ansehen