Numerosi siti web hanno menu laterali che hanno un'animazione di entrata e di uscita, ma anche popup e altri elementi. In questa lezione, vediamo come creare le animazioni con JavaScript e il DOM.
Cambiare la classe
Prendiamo l'esempio del menu laterale: per visualizzarlo, bisognerebbe semplicemente cambiare la posizione da sinistra verso destra. Ma come si può fare? Modificando la classe.
Come abbiamo visto nella lezione sugli attributi, per modificare il valore di un attributo si può utilizzare setAttribute(), che ha sintassi setAttribute(nome_attributo, valore).
Nel nostro caso, dobbiamo modificare la classe, così da spostare l'elemento da sinistra a destra.
Creazione del menu animato
Per prima cosa, prendiamo questo semplice codice HTML:
<html>
<head>
<style>
#div {
width:100px;
height:100px;
background-color:grey;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>In questo caso, abbiamo un div (il nostro menu) con un id, una larghezza (width) di 100px e una altezza (height) di 100px.
Pulsante per aprire e chiudere il menu
Creiamo un pulsante che apra e chiuda il menu quando viene cliccato, utilizzando onclick e una funzione.
<html>
<head>
<style>
#div {
width:100px;
height:100px;
background-color:grey;
}
</style>
</head>
<body>
<div id="div"></div>
<button onclick="menu()">Menu</button>
</body>
</html>Quando il pulsante <button> viene cliccato, viene eseguita la funzione menu().
Classe "aperto" e "chiuso" del menu
Ora dobbiamo creare le due classi del menu da posizionare nell'attributo class all'occorrenza. Le inseriamo all'interno di <style>.
<html>
<head>
<style>
#div {
width:100px;
height:100px;
background-color:grey;
position:absolute;
transition:0.2s; /* Tempo dell'animazione */
}
.aperto {
top:50px;left:0;
}
.chiuso {
top:50px;left:-100px;
}
</style>
</head>
<!-- Continuo del programma -->
</html>La classe aperto posiziona il menu nell'angolo in alto, mentre chiuso a sinistra della pagina (non si vede).
Funzione per cambiare la classe
Creiamo ora la funzione menu(). Deve controllare se il menu è aperto o chiuso, e poi farlo apparire o meno.
function menu() {
const menu = document.getElementById("div");
const posizione = menu.getAttribute("class");
if(posizione == "chiuso") {
menu.setAttribute("class", "aperto");
} else {
menu.setAttribute("class", "chiuso");
}
}Nella funzione, viene prima dichiarato il menu tramite l'id. Poi, viene trovata la posizione (aperto o chiuso) tramite getAttribute(), con cui si ricava il valore dell'attributo class. Infine, tramite if e else, viene modificata la classe.
Script del risultato finale
Abbiamo creato, passo dopo passo, il nostro menu animato. Ora vediamo lo script finale:
<html>
<head>
<style>
#div {
width:100px;
height:100px;
background-color:grey;
position:absolute;
transition:0.2s;
}
.aperto {
top:50px;left:0;
}
.chiuso {
top:50px;left:-100px;
}
</style>
</head>
<body>
<script>
function menu() {
const menu = document.getElementById("div");
const posizione = menu.getAttribute("class");
if(posizione == "chiuso") {
menu.setAttribute("class", "aperto");
} else {
menu.setAttribute("class", "chiuso");
}
}
</script>
<div id="div" class="chiuso"></div>
<button onclick="menu()">Menu</button>
</body>
</html>