Detailreiche Dialog-Elemente mit Mikrointeraktionen erstellen

In diesem Artikel und den folgenden Schritten werden wir ein detailliertes modales Dialogfeld erstellen und dabei verschiedene CSS-Animations- und Übergangseigenschaften verwenden, um ansprechende Mikrointeraktionen zu erstellen.

Die Grundlagen

In seiner einfachsten Form erfordert das Auslösen eines Dialogs nur zwei Elemente: eine Schaltfläche zum Öffnen des Dialogs und den Dialog selbst. Die Schaltfläche ist mit dem Dialog verknüpft, indem die Methode showModal() verwendet wird, die eine eingebaute Methode des Dialogelements ist.

<div id="app">
  <div id="content">
    <button>Open Dialog</button>

    <dialog>
      <p>Hello World</p>
    </dialog>
  </div>
</div>

const button = document.querySelector('button');
const dialog = document.querySelector('dialog');

button.addEventListener('click', () => dialog.showModal());

Styling des Dialogs

Um unser modales Dialogfeld ein wenig auffälliger zu machen, entfernen wir den Standardrahmen, fügen einen Rahmenradius hinzu und wenden einen Schlagschatten an. Ansonsten können wir das Dialogelement wie jedes andere Element behandeln und es entsprechend gestalten.

dialog {
  border: unset;
  border-radius: 0.375rem;
  filter: drop-shadow(0 0.75rem 0.75rem #00000020);
}

Gestalten des Hintergrunds

Der Hintergrund ist das Standard-Overlay, das hinter dem Dialog erscheint. Du wirst ihn auch bei der Arbeit mit Popovers antreffen. Wir können ihn mit dem Pseudo-Element ::backdrop gestalten. In diesem Beispiel setzen wir die Hintergrundfarbe auf ein halbtransparentes Schwarz.

dialog::backdrop {
  background-color: #00000020;
}

Hinzufügen von Mikrointeraktionen

Wir haben nun eine einfache, aber sehr schlichte Implementierung eines modalen Dialogs hinzugefügt. Um die Sache aufzupeppen, fügen wir die oben erwähnten Mikrointeraktionen mit Hilfe von CSS-Animationen und -Übergängen hinzu, um dem Dialog eine ansprechendere Darstellung und etwas mehr Tiefe zu verleihen.

Stammvariablen festlegen

Definiere eine CSS-Variable für die Dauer der Animation und setze sie auf 150ms oder einen Wert deiner Wahl. Wenn die Nutzer:innen eine reduzierte Bewegung bevorzugen, respektiere diese Vorliebe und setze die Dauer auf einen Wert, der die Augen weniger anstrengt, oder auf 0 ms.

:root {
  --animation-duration: 150ms;

  @media (prefers-reduced-motion) {
    --animation-duration: 0ms;
  }
}

Definition der Animation

Für dieses Beispiel verwenden wir eine der einfachsten Animationen, die es gibt, und blenden den Dialog ein. Wir definieren eine Keyframe-Animation namens fade-in, die den Dialog von 0 % auf 100 % Deckkraft einblendet.

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opactiy: 1;
  }
}

dialog {
  animation: fade-in var(--animation-duration) ease-out both;

  &::backdrop {
    animation: fade-in var(--animation-duration) ease-out both;
  }
}

Tiefe mit Transformationen hinzufügen

Um dem Dialog ein Gefühl von Tiefe zu geben, wenden wir eine perspektivische Transformation auf das Element #app an. Dies bringt den Dialog in den Vordergrund, während das Element #app in den Hintergrund tritt und sein #content unscharf wird.

Beachte, dass wir @media (prefers-reduced-motion: no-preference) eingesetzt haben, um die perspektivische Veränderung nur dann anzuwenden, wenn Nutzer:innen die Präferenz nicht auf reduzierte Bewegung gesetzt haben.

body {
  background: #eee;

  &:has(dialog[open]) {
    overflow: hidden;

    @media (prefers-reduced-motion: no-preference) {
      #app {
        border-radius: 0.75rem;
        filter: drop-shadow(0 0.75rem 0.75rem #00000020);
        overflow: hidden;
        transform: perspective(100vw) translateZ(-3rem);
      }
    }

    #content {
      filter: blur(0.125rem);
    }
  }
}

Anwenden von Übergängen

Jetzt müssen nur noch die entsprechenden Übergangseigenschaften auf die Elemente #app und #content angewendet werden, um die Transformation und die Filtereigenschaften entsprechend zu animieren. Um #app als Ebene zu unterscheiden, sollte auch eine gedämpfte Hintergrundfarbe für das Element <body> verwendet werden.

#app,
#content {
  transition-property: transform, filter, border-radius;
  transition-duration: var(--animation-duration);
  transition-timing-function: ease-out;
}

#app {
  background: #fff;
}

Ergebnis

Und das war’s 🎉 Du hast soeben ein ansprechend animiertes modales Dialogfeld in deine Seite implementiert, wobei du die Benutzerpräferenzen berücksichtigt und standardmäßige und gängige Techniken und Werkzeuge verwendet hast. Sieh dir die Codepen-Demonstration unten an, um ein besseres Gefühl für das Endprodukt zu bekommen:

PS: Das Dialogfenster kann durch Drücken von ESC geschlossen werden.

---

TL;DR

Lerne, wie man ein detailliertes modales Dialogfeld mit Mikrointeraktionen erstellt. Wir behandeln die Grundlagen, das Styling des Dialogs, das Hinzufügen von Mikrointeraktionen und die richtige Anwendung von Übergängen.