Salve, ho aperto la stessa discussione nella sezione HTML perché vorrei avere una soluzione in HTML ma al momento mi preme portarmi a casa un risultato qualunque sia il mezzo, spero che possiate aiutarmi.
Ho bisogno di avere due bottoni, o anche lo stesso, al cui click cambino gli stili di una div. Ho sostanzialmente una div che si allarga e si riduce con un semplice comando transform:scale.
Vi riporto un esempio con il metodo :hover.
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>
Non mi riesce di farlo al click. Ho trovato una soluzione che prevedeva di usare @keyframe per definire l'animazione, metterla in pausa e dirle di interrompersi all'ultimo frame, poi al click cambiare lo stato in running. Così facendo però una volta che la finestra si è ridotta non so come fare a dirgli di ripartire con l'animazione nel senso inverso.
La cosa più semplice per me, anche per eventuali altre applicazioni, è avere un comando che mi dica "al click vai a leggere quello stile" un po' come già avviene con il mouse event :hover.
Grazie mille.
