zurück zur Übersicht


Fade Animations - Echtes Beispiel

Dieser Content verwendet .fade-enter-active und .fade-enter

HTML-Struktur für Fade Animation
<div id="fade-demo-1" class="fade-enter-active fade-enter">
  <p>Content der ein-/ausfaded</p>
</div>
Verwendete CSS-Klassen für Fade
Cross-Fade Animations - Echtes Beispiel

Cross-Fade Animation (.1s transition)

HTML-Struktur für Cross-Fade Animation
<div id="cross-fade-demo-1" class="cross-fade-enter-active cross-fade-enter">
  <p>Content der cross-faded</p>
</div>
Verwendete CSS-Klassen für Cross-Fade
Modal mit Fade - Echtes Beispiel
HTML-Struktur für Modal mit Fade
<div id="modal-overlay" class="modal-overlay fade-enter-active fade-enter" style="display: none;">
  <div class="modal-content">
    <h4>Modal Titel</h4>
    <p>Modal Content</p>
    <button onclick="toggleModal()">Close</button>
  </div>
</div>
Tab System mit Cross-Fade - Echtes Beispiel

Tab 1 Content

Inhalt des ersten Tabs

HTML-Struktur für Tab System
<div class="tab-content-container">
  <div id="tab-1" class="tab-content cross-fade-enter-active cross-fade-enter-to">
    <h4>Tab 1 Content</h4>
  </div>
  <div id="tab-2" class="tab-content cross-fade-enter-active cross-fade-enter" style="display: none;">
    <h4>Tab 2 Content</h4>
  </div>
</div>
Notification mit Auto-Fade - Echtes Beispiel
HTML-Struktur für Auto-Fade Notification
<div id="notification" class="notification fade-enter-active fade-enter" style="display: none;">
  <p>Notification Text</p>
</div>
Staggered List Fade - Echtes Beispiel
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
HTML-Struktur für Staggered List
<ul id="staggered-list" class="staggered-list">
  <li class="fade-enter-active fade-enter">List Item 1</li>
  <li class="fade-enter-active fade-enter">List Item 2</li>
  <li class="fade-enter-active fade-enter">List Item 3</li>
</ul>
JavaScript für Animation-Steuerung
// Fade Toggle
function toggleFade(elementId) {
  const element = document.getElementById(elementId);
  if (element.classList.contains('fade-enter')) {
    element.classList.remove('fade-enter');
    element.classList.add('fade-enter-to');
  } else {
    element.classList.remove('fade-enter-to');
    element.classList.add('fade-enter');
  }
}



zurück zur Übersicht