Animazione di una Div al comando click

**Ciakko** · 06-06-2014, 12:10

Buongiorno, mi sono impelagato nel progettare la mia pagina web. Ho fatto davvero molte ricerche e tentativi ma sono ad un punto morto. Vi sarei veramente grato per un aiuto.

Sto cercando un modo per far partire l'animazione di una div al click di un bottone e fare il reverse dell'animazione ad un nuovo click dello stesso pulsante o anche su di uno differente.
In sostanza ho una div container ed una div content. La div content è proporzionata in percentuale rispetto al container. Vorrei che il content si rimpicciolisse con un click e tornasse alla sua dimensione originale con un nuovo click.

Usando la funzione :hover e :focus l'animazione parte tranquillamente ma ho bisogno che parta ad un click.

codice HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>

<style type="text/css">
.container {position: absolute; width:90%; height:100%; left:5%; min-width:1000px; border: 1px solid #000}
.content {position:relative; width:60%; height:90%; top:1%; left:35%; border: 1px solid #000}
.nav {position:absolute; width:20%; height:90%; min-height:700px; top:1%; left:1%; padding:1%; border: 1px solid #000}
.bottone {position:relative; width:90%; height:10%; border:1px solid red;text-align:center;}

.nav:hover ~ .content {transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
</style>
</head>

<body>

<div class="container">
<div class="nav">
</div>
<div class="content"></div>

</div>
</body>
</html>

Ho provato quindi ad inserire un label ma così non parte:

codice HTML:

#start:checked ~ .content {transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}

<label for="start">Clicca qui</label>

Ho quindi optato per creare un @keyframes, mettere in pausa l'animazione all'avvio e con un codice java cambiare lo state dell'animazione in running:

codice HTML:

.content { transform-origin: right top; animation: ridurre 1s ease-out; animation-direction: alternate; animation-fill-mode:forwards; animation-play-state: paused;}

@keyframes ridurre{
from {transform:scale(1.0);
}
to {transform:scale(0.5);
}
}

window.onload = function () {
  document.getElementById('riduci').onclick = function () {
    var elems = document.getElementsByClassName('content');
    for (var i = 0; i < elems.length; i++) { elems[i].style.animationPlayState = 'running';};
}
}

<label id="riduci">
<div id="bottone"><img src="images/riduci.png" alt="riduci" width="100%"></div>
</label>

In questa maniera l'animazione parte e si interrompe all'ultimo frame, ma siccome non conosco java non ho idea di come dirgli di riprendere l'animazione al nuovo click in reverse.

Qualche consiglio per continuare su questa strada o c'è qualche altro modo che conoscete?

Grazie mille!!

**Prill** · 06-06-2014, 14:16

puoi creare due funzioni con javascript, una per ridurre e l'altra per ingrandire, da attribuire all'onclick su due elementi, creando due animazioni distinte.
Esempio:

codice:

<style type="text/css">
.container {position: absolute; width:90%; height:100%; left:5%; min-width:1000px; border: 1px solid #000}
.nav {position:absolute; width:20%; height:90%; min-height:700px; top:1%; left:1%; padding:1%; border: 1px solid #000}
#content {position:relative; width:60%; height:90%; top:1%; left:35%; border: 1px solid #000}

.contentAnimation{transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
.contentAnimationReverse{transform-origin:left top; -webkit-transform-origin:left top;transform:scale(1);-webkit-transform:scale(1); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
</style>
<script type="text/javascript">
function riduci(){
document.getElementById('content').className ='contentAnimation';
}
function espandi(){
document.getElementById('content').className ='contentAnimationReverse';
}
  </script>
</head>

<body>
<div class="container">
<div class="nav">
<span onclick="riduci()">riduci</span>
<span onclick="espandi()">espandi</span>
</div>
<div id="content"></div>

</div>

poi ci saranno modi migliori per farlo, ma se intendi usare javascript meglio starebbe la tua richiesta nel forum relativo

**Ciakko** · 06-06-2014, 14:44

In realtà avrei preferito fare un progetto totalmente in Html5 per dimostrarne le potenzialità, però capisco che se serve per semplificare la vita va bene anche java.

Non conoscevo questo sistema di assegnazione, molto intuitivo e comodo. Ho imparato qualcosa di nuovo.
Lo provo e poi ti saprò dire, per ora grazie mille.
Ciao

**Ciakko** · 06-06-2014, 15:44

Rieccomi, ho provato il codice così come me lo hai passato ma non funziona.
Ho provato anche con label e button al posto di span, ma nulla.
Inserirò la stessa richiesta anche nella sezione Java.

**tampertools** · 06-06-2014, 16:02

1) NON E' JAVA; E' JAVASCRIPT

2) Ecco un esempio senza javascript

codice:

.content {
    width:200px;
    height:200px;
    border: 1px solid #000;
    transition:all 2s ease-in;
    -webkit-transition:all 2s ease-in;
}


#animation-start:checked ~ .content {
    transform-origin:right top;
    -webkit-transform-origin:right top;
    transform:scale(0.5);
    -webkit-transform:scale(0.5);
}


#animation-start {
    display:none;
}

codice HTML:

<label for="animation-start">Clicca qui!</label>
<input type="checkbox" id="animation-start">
<div class="content"></div>

**Ciakko** · 06-06-2014, 16:17

Chiedo venia...
uh.. con le orecchie da asino.. non avevo associato un input al label, ecco perché non mi partiva..
Grazie mille

**tampertools** · 06-06-2014, 16:30

In realtà avrei preferito fare un progetto totalmente in Html5 per dimostrarne le potenzialità

Un po' di tempo fa ho letto due articoli di un autore che la pensa come te... magari potrebbero interessarti
Tasti a "porta"
Accordition (Demo)

**Ciakko** · 06-06-2014, 16:44

Ultima cosa.. se non sbaglio perché funzioni il bottone deve trovarsi in una posizione superiore rispetto alla div da animare.
Se il bottone si trova nella div stessa o annidato per esempio in un nav laterale c'è qualche possibilità di usare lo stesso sistema?

**Ciakko** · 06-06-2014, 16:44

Grazie mille per i link!

**tampertools** · 06-06-2014, 16:56

il label puoi metterlo dove vuoi, invece l'input deve essere in allo stesso livello del div o allo stesso livello dei genitori

Discussione: Animazione di una Div al comando click

Strumenti discussione

Ricerca discussione

Visualizza

Animazione di una Div al comando click

Permessi di invio