• C
    User Newbie •

    Animazione di una Div al comando click

    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.

    [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}
    .nav {position:absolute; width:20%; height:90%; min-height:700px; top:1%; left:1%; padding:1%; border: 1px solid}
    .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>
    [/HTML]

    Ho provato quindi ad inserire un label ma così non parte:
    [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>

    [/HTML]

    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:
    [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*.style.animationPlayState = 'running';};
    }
    }

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

    [/HTML]

    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!!

    0
Effettua l'accesso per rispondere