Vai al contenuto

Animazione css3 transizione

R.Francesco

Da R.Francesco
in Web design e sistemisti

Messaggi raccomandati

R.Francesco

R.Francesco

Inviato
Inviato

Ciao a tutti,

sto creando un sito e vorrei che nel caricamento si vedesse come un effetto a tendina, nel senso che il sito da dimensione di altezza 0 passi alla sua altezza normale tramite una transizione, ho provato a cercare su internet a riguardo e ho buttato giù questo codice, però non viene eseguita la transizione...

Cioè eliminando la classe "dimensionezero" il sito passa alla sua grandezza naturale, ma non tramite un effetto lineare di transizione...

Non ho ben capito come attivare le transizioni...

 

codice HTML:

 

*

*

*

function eliminaclasse(id,classe){
 
document.getElementById(id).classList.remove(classe);
 
}
 
var timer2=setTimeout("eliminaclasse('corpo','dimensionezero')",100);
 
 
</script>
 
 
  </head>
  <body>
    
<div id="corpo" class="dimensionezero">
*
*
*
 
Codice CSS:
 
*
*
*
.dimensionezero{
 
height:0px;
display:none;
 
}
 
#corpo {
 
background-color: #F2F2F2;
 
max-width:1024px ;
min-width: 340px;
 
padding: 0 2% 0 2%;
 
margin-left: auto;
margin-right: auto;
 
transition-property: height;
transition-duration: 3s;
 
-webkit-transition-property: height;
-webkit-transition-duration: 3s;
 
-moz-transition-property: height;
-moz-transition-duration: 3s;
 
}

*

*

*

 

Grazie in anticipo! :)

:apple:  iPhone 5S

Link al commento
Condividi su altri siti
pix

pix

Inviato
Inviato

anziché definire lo stile dell'elemento sull'id E sulla classe dichiarerei 2 classi e farei una funzione "cambiaclasse" per passare da una all'altra.

 

a parte questo, nella classe "dimensionezero" dichiari un'altezza mentre nello stile di fallback sull'id non c'è l'attributo altezza.

prova almeno a mettere height: auto; potrebbe bastare.

oppure dichiara un'altezza percentuale (100%) o ancora in pixel.

An  a tuesday keeps the doctor away.

proud member of < noi finti professionisti > club - tessera 044

Link al commento
Condividi su altri siti
R.Francesco

R.Francesco

Inviato
  • Autore
Inviato

Grazie per la risposta, allora, ho cambiato il codice in questo modo, ma di animazioni non c'è verso...

 

HTML:

*

*

*function cambiaclasse(id,classe){

 
document.getElementById(id).className=classe;
 
}
 
var timer2=setTimeout("cambiaclasse('corpo','dimensione_normale_corpo')",1000);
 
</script>
 
 
  </head>
  <body>
    
<div id="corpo" class="dimensione_zero_corpo">
*
*
*
 
 
CSS:
*
*
*
.dimensione_zero_corpo{
 
height:0px;
display:none;
 
transition-property: height;
transition-duration: 3s;
 
-webkit-transition-property: height;
-webkit-transition-duration: 3s;
 
-moz-transition-property: height;
-moz-transition-duration: 3s;
 
}
 
.dimensione_normale_corpo{
 
height:auto;
display:inherit;
 
 
transition-property: height;
transition-duration: 3s;
 
-webkit-transition-property: height;
-webkit-transition-duration: 3s;
 
-moz-transition-property: height;
-moz-transition-duration: 3s;
 
}
 
#corpo {
 
background-color: #F2F2F2;
 
max-width:1024px ;
min-width: 340px;
 
padding: 0 2% 0 2%;
 
margin-left: auto;
margin-right: auto;
 
}

:apple:  iPhone 5S

Link al commento
Condividi su altri siti
gg07

gg07

Inviato
Inviato

Ciao,

ho provato a sistemare il tuo codice (http://codepen.io/gg07/pen/KwRzdX) 

<html>
    <head>
        <title>Prova animazione</title>
        <style>
            #corpo {
            background-color: #F2F2F2;
            width:1024px ;
            padding: 0 2% 0 2%;
            margin-left: auto;
            margin-right: auto;
            display: inherit;
            }

            
            .dimensione_zero_corpo{
            height:0px;
            }

            .dimensione_normale_corpo{
            height:340px;
            display:inherit;
            transition-property: height;
            transition-duration: 3s;
            -webkit-transition-property: height;
            -webkit-transition-duration: 3s;
            -moz-transition-property: height;
            -moz-transition-duration: 3s;
            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>        
    </head>
    <body>
    <div id="corpo" class="dimensione_zero_corpo">
        
    </div>
        <script>
            $(document).ready(function(){
                setTimeout(function(){
                $(".dimensione_zero_corpo").toggleClass("dimensione_normale_corpo").removeClass("dimensione_zero_corpo");
                },1000);
            })
        </script>
    </body>
</html>

verifica se sono riuscito a risolvere il tuo problema

http://gabrielegrassi.altervista.org (sito in costruzione), grassi.07@aol.com
Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...