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>