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>

Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
Warum nutzen wir alle nicht wieder alte Software?

Jetzt mal Hand aufs Herz. Wir wollen doch alle Geschwindigkeit oder nicht. Warum das also wegwerfen? Man könnte ja zumindest nutzen was schon erreicht wurde.

Ich weiß gleich kommen die folgenden Argumente:

- Es lohne sich nicht, da Hardware günstiger sei:

-> Das stimmt nicht. Milliarden Nutzer * 1500€ sind mehr als die Entwicklungskosten einee optimierung. Außerdem wäre das Wirtschaft und es heißt ja ComputerSCIENCE

- Es sei nicht nötig sich die Mühe zu machen da Computer das heute alles packen:

-> Das sah bei GTA6 jetzt nicht so aus! Und was ist mif skalierungsmöglichkeiten, Multitasking und Massendatenverarbeiting, Ernergiekosten, Überlastungen von Rechensystemen... Umweltschutz und Die Herstellung neuer Computerbauteile?

- Es liegt alles an OOP und Web:

-> Das gibts es schon ewig. Es erklärt nicht so wirklich viel davon.

- Geplante Alterung sei Notwendig da die Firmen sonst Pleite gehen:

-> Den Firmen die das tun platzt das Geld aus den Hosentaschen. Und außerdem geht das auch anders. Man kann auch alle paar Jahre eine Lizens erneuern oder es teuerer machen, aber ich denke nicht das Geld das Problem ist? Selbst wenn - Es wird immer zwischen den Themen herumgeschaukelt. Ich sehe das schon, Ich bin nicht auf den Kopf gefallen.

- Zeit zur Veröffentlichung und Marketing sei wichtiger:

-> Ich sprach nicht von dem Azubi nem Becker seine Webseite erstellt.

- Es war früher nicht schneller:

-> Doch war es erinnere dich bitte

- Die Hardware kann nicht mehr:

-> Doch kann Sie, alte Software beweißt es.

- Linux sei die Lösung

-> Schön wärs. Leider nur leichter aber nicht schneller.

- Treiber kann man nicht schreiben:

-> Wenn man sich nicht drüber unrerhällt kann man auch nichts gewinnen. Nicht versucht ist schon verloren.

Ds wird immer ständig zwischen diesen Punkten herumgereicht.

Hab ich was vergessen? Nun Realtalk mal bitte, es muss sich doch was ändern! Ihr könnt mir nicht erzählen das ihr das so wollt...

Computer, Computerspiele, Software, Windows, Microsoft, Studium, Technik, Linux, CPU, Grafikkarte, Hardware, Elektronik, HTML, programmieren, Business, RAM, Wissenschaft, Gaming, Anwendungsentwicklung, Assembler, developer, Industrie, Informatik, Python, Softwareentwicklung, Treiber, Software Update, Technologie und Wirtschaft
LAN-Verbindung plötzlich langsam ohne Veränderung?

Guten Tag, ich habe folgendes Problem:

Ich hatte an meinem PC mit LAN immer einen Download zwischen 500 und 600 Mbit und einen Upload zwischen 25 und 30Mbit.

Das ganze fing damit an, dass ohne Vorwarnung mein LAN Port im Mainboard tot war. Es wurde einfach keine Verbindung mehr erkannt, versucht wurden verschiedene Kabel.

Ich habe mir danach eine Netzwerkkarte zugelegt und es damit über LAN versucht, hier tat sich dann das Problem auf, dass die Geschwindigkeit weder beim Upload, noch beim Download die 10Mbit überschritt. Wobei hier der Upload immer höher als der Download war.

Auch der Versuch mit einer anderen Netzwerkkarte half nichts. (Bild 1)

Dann, etwa 1-2 Monate später war auf einmal der ursprüngliche Download/Upload Speed da, ohne, dass irgendetwas bewusst verändert wurde. (Bild 2)

Und nun, wieder etwas einen Monat später hat sich das ganze wieder rückgängig gemacht und es sind wieder unter 10Mbit. Ebenfalls ohne Fremdeinfluss.

Zwischen Router und PC(Netzwerkkarte) liegen 3 verschiedene LAN-Kabel. Eins davon in der Wand, da sich der Router auf einer anderen Etage als der PC befindet. Eins vom Router zu Buchse in der Wand, und eins von der Buchse auf der Etage des Computers bis zu diesem.

Ich bin langsam wirklich mit meinem beschränkten Wissen in diesem Bereich am Ende, falls jemand eine Idee hat, ich stehe für Rückfragen zur Verfügung. Vielen Dank schonmal :)

Bild zu Frage
PC, Computer, Internet, Internetverbindung, Technik, Netzwerk, Gaming, Ethernet, FRITZ!Box, LAN, Router, Speedtest, Downloadgeschwindigkeit, LAN-Kabel
Welches Grafik Tablet ist besser (mit links)?

Hey leute.

Ich wollte mit digitalen Zeichnen anfangen. Und ich wollte erstmal schauen wie es allgemein so ist. Ob ich mit dem Programm (welches extra hole) klar komme und mit dem Tablet (Einsteiger halt).

Nur ich weiß leider nicht, welches wirklich besser ist. Bzw ob der Preis gerechtfertigt diese 70-80 Euro mehr.

Vielen lieben dank.

1.

https://www.amazon.de/XP-PEN-Artist-12-Grafikmonitor-Radiergummi/dp/B07GNK18VJ/ref=sr_1_3?crid=2T8VZRI12MLNJ&dib=eyJ2IjoiMSJ9.PJWcODSgnQUHNwN1S0PDPqTideHSnnwMRtcifU4BM3qVsLUG-XLQfnnMLU_NyRwdly_Ghmpq4HZ71c_rdqTasCOA9XD7SRyakAzdUuO1C0-VfdyqB9QbPyX51Y460raY4yOiHoCygYSawF36IoKCwjDP44MYQ9w9dxlwk0ZkkydXj1AAEsCOyWwftDgot0gNoTDYQHrDgU9-7VKtONSFvpPevU4Wf2XUFgRvLmqo72U.cOhmH8qnavxsrS_raM_SnZEd8q1v1LHpo1_Atguowmc&dib_tag=se&keywords=x+pen+artist+12+pro&qid=1713283986&sprefix=%2Caps%2C123&sr=8-3&ufe=app_do%3Aamzn1.fos.335e368b-29e8-4542-bb58-939a88195e78

2.

https://www.amazon.de/XP-PEN-Grafiktablett-Display-Drawing-Neigungsfunktion/dp/B07ZJ3PQSH/ref=sr_1_4?crid=2T8VZRI12MLNJ&dib=eyJ2IjoiMSJ9.PJWcODSgnQUHNwN1S0PDPqTideHSnnwMRtcifU4BM3qVsLUG-XLQfnnMLU_NyRwdly_Ghmpq4HZ71c_rdqTasCOA9XD7SRyakAzdUuO1C0-VfdyqB9QbPyX51Y460raY4yOiHoCygYSawF36IoKCwjDP44MYQ9w9dxlwk0ZkkydXj1AAEsCOyWwftDgot0gNoTDYQHrDgU9-7VKtONSFvpPevU4Wf2XUFgRvLmqo72U.cOhmH8qnavxsrS_raM_SnZEd8q1v1LHpo1_Atguowmc&dib_tag=se&keywords=x+pen+artist+12+pro&qid=1713284009&sprefix=%2Caps%2C123&sr=8-4&ufe=app_do%3Aamzn1.fos.335e368b-29e8-4542-bb58-939a88195e78

PC, Kunst, Technik, malen, zeichnen, Designer, Tablet, Zeichnen am Computer
Seltsames nächtliches Erlebnis. Was war das?

Gestern spätnachts ging ich raus auf meinen Balkon. Da hörte ich seitlich unter dem Dachvorsprung etwas, das mehrmals gegen das Holz und den Dachbalken prallte. Nach einigen Aufprallgeräuschen kam von dort ein seltsamer elektronischer Ton, wie elektrische Impulse. Ich weiß gar nicht, wie ich das beschreiben soll. Am ehesten noch wie die Alarmanlage mancher Autos, aber sehr viel leiser.

Dann hörte ich den elektronischen Ton direkt neben mir. Sonst war es ganz still. Kein Flügelschlag eines Vogels oder andere Tiergeräusche. Ich konnte das Tier aber in der Dunkelheit nicht sehen. Schließlich kam der elektronische Ton von unten von der Terrasse. Dort hörte ich auch ein rascheln zwischen den Blumen. Danach hörte ich den Ton vom kleinen Privatparkplatz nebenan, wo er sich langsam entfernte, nochmal zurückkam und letztendlich aufhörte.

Nach einigen Minuten ging ich nochmals raus und lauschte. Der elektronische Ton war nicht mehr zu hören, aber ich hatte das starke Gefühl, da unten ist irgendwas.

Als einzige Erklärung dafür fällt mir ein, dass es ein Vogel mit einem Sender sein könnte. Er hatte wohl auf dem Dachbalken oben geschlafen, hat sich durch mich erschreckt und flog dann in der Dunkelheit in der Gegen rum.

Wissenschaftler bringen doch manchmal an Vögeln und anderen Tieren Sender an. Kann man diese Sender hören? Aber der Vogel/das Tier war absolut lautlos, nur eben dieses nichttierische Geräusch war zu hören.

Habt ihr eine Idee, was das gewesen sein könnte? Um das gleich auszuschließen: Nein, ich war weder bekifft noch betrunken noch sonstwas.

Natur, Technik, Vögel, Wissenschaft, Biologie, Ornithologie, Fledermaus, unerklärlich

Meistgelesene Fragen zum Thema Technik