HTML, CSS, JavaScript Animation einfügen?
Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.
Wie implementiere ich eine Fade-In und Fade-Out Animation.
Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:
- ...dass Content 1 von Opacity 100 auf 0 geht
- ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
- ...dass Content 2 von Opacity 0 auf 100 geht
- ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird
Alles in einer Zeit von 0,3 Sekunden.
Wie mache ich das am Besten?
Danke.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
#wrapper_main {
display: flex;
width: 100%;
}
#wrapper_menue {
width: 20%;
margin-right: 10%;
}
#wrapper_content {
width: 70%;
}
.menu-item, .submenu-item {
cursor: pointer;
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
}
.menu-item:hover, .submenu-item:hover {
background-color: #dddddd;
}
.content {
display: none;
}
#submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
#wrapper_menue:hover #submenu {
max-height: 200px;
}
</style>
</head>
<body>
<div id="wrapper_main">
<div id="wrapper_menue">
<div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
<div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
Menüpunkt 2
<div id="submenu">
<div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
<div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
<div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
<div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
</div>
</div>
<div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
</div>
<div id="wrapper_content">
<div id="content_1" class="content">
<h2>Inhalt 1</h2>
</div>
<div id="content_2" class="content">
<h2>Inhalt 2</h2>
</div>
<div id="content_2_1" class="content">
<h2>Inhalt 2.1</h2>
</div>
<div id="content_2_2" class="content">
<h2>Inhalt 2.2</h2>
</div>
<div id="content_2_3" class="content">
<h2>Inhalt 2.3</h2>
</div>
<div id="content_2_4" class="content">
<h2>Inhalt 2.4</h2>
</div>
<div id="content_3" class="content">
<h2>Inhalt 3</h2>
</div>
</div>
</div>
<script>
function showContent(id, event) {
if (event) {
event.stopPropagation();
}
var contents = document.querySelectorAll('.content');
contents.forEach(content => {
content.style.display = 'none';
});
document.getElementById(id).style.display = 'block';
}
window.onload = function() {
showContent('content_1');
};
</script>
</body>
</html>
1 Antwort
Ich finde solche komplexen Fragestellungen problematisch. Um Dir tatsächlich weiterzuhelfen, müssten man den Code kopieren, bei sich laufen lassen und dann an einer Lösung basteln. Wer das seriös macht, ist im Zweifelsfall dabei eine Stunde und länger beschäftigt. Wer hat so viel Langeweile?
Vielleicht brichst Du die Einzelfragestellungen herunter?
Man kann solche Animationen mit JavaScript zwar realisieren, aber ich würde die Animationen auf reinem CSS basieren lassen und ggf. über JavaScript triggern. Die Puristen bekommen das wahrscheinlich rein auf CSS basiert hin.
Eine rein CSS-basierte Aufklappanimation ist einfach und könnte über CSS mit ":active" angesteuert werden. Beim Aufruf eines anderen Menüpunktes einen anderen Inhalt animiert verschwinden zu lassen, ist von der Steuerung etwas komplexer. JavaScript würde da vieles vereinfachen.
Ein Spielbeispiel (um alles hereinzufaden) wäre z.B. (im Style-Bereich von <head>:
html {
animation-name: Wunschname 1s;
}
@keyframes Wunschname {
0% {opacity: 0;}
100% {opacity: 1;}
}
Ich habe das <html>-Element animiert, damit es alle "Kinder"-Elemente auch erfasst. (die Dauer ist auf 1 Sekunde angegeben, da man sonst beim Fade nicht viel mitbekommt.
Das ist so ungetestet, müsste aber funktionieren.
Die weitere Komplexität kann darauf dann aufbauen.
Hier ist noch ein Beispiel mit "Transition": https://www.w3schools.com/css/css3_transitions.asp
Das solltest Du für Deine Zwecke doch schnell anpassen können. Statt ":hover" probierst Du mal ":active" aus und fügst das angepasst passend in Deinen CSS-Code. Sollte sogar dann ohne JavaScript laufen und das sogar unkompliziert.
Naja, der eigentliche Code ist mit ganzem Inhalt deutlich komplexer, ich habs schon komplett runtergebrochen :D
Mir reicht als Antwort auch wo ich genau den Part der Animation einfüge? In das JavaScipt? Ins CSS? Den Rest mit den detaillierten Parametern bekomme ich selbst hin.