Richiamare transizioni css con Javascript

**Franco85** · 10-11-2015, 23:17

Salve a tutti

, sto scrivendo un sito mio, vorrei creare due bottoni che diano l'input destra-sinistra a delle transizioni css e che cambino link allo stesso tempo....ho spulciato qua e la per la rete, non avendo molte nozioni tecniche in javascript, e mi sono bloccato

non riesco a capire come dare più di due input tramite javascript....

codice:

        
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Prova</title>


</head>
<body>
    
<div class="transition0" id="animation"></div>
<button onclick="toggle()">Click</button>
    
    
    
    <style>
#animation
{
  
  background-color:#ff0000;
  width:100px;
  height:100px;
  -webkit-transition:0.5s ease all;
  -webkit-transform:width:10px ;
  -moz-transition:0.5s ease all;
  -moz-transform:width:10px ;
  -o-transition:0.5s ease all;
  -o-transform:width:10px ;
  -ms-transition:0.5s ease all;
  -ms-transform:width:10px;
  
  transition:0.5s ease all;
  transform:width:10px ;;
}


#animation.transition1
{
  
  background-color:#e6a529;
  width:200px;
  height:100px;


}
            
#animation.transition2
{
  
  background-color:#ffeb00;
  width:400px;
  height:100px;


}
    
#animation.transition3
{
  
  background-color:#000aff;
  width:600px;
  height:100px;


}
        
#animation.transition4
{
  
  background-color:#00ff31;
  width:800px;
  height:100px;


}    
</style>
    
    
<script>
function toggle()
{
  var animation=document.getElementById("animation");
  animation.className=animation.className=="transition0" ? 
  "transition1" : 
  "transition2" ;
  "transition3" ;
  "transition4" ;
}
</script>




</body>
</html>

la prima e seconda la fa senza problemi, però se ne aggiungo altre, si blocca...poi credo che per assegnare un link diverso al div ad ogni click si usi lo stesso sistema....credo...

**Franco85** · 13-11-2015, 00:24

ho modificato il codice aggiungendo un esempio di come vorrei fare,
nel caso non mi fossi spiegato bene, non riesco a capire come configurare javascript a fare più di due animazioni

codice:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Prova</title>


</head>
<body>
    
<div class="transition0" id="animation"></div>
    <button onclick="toggle2()">Indietro</button>
<button onclick="toggle()">Avanti</button>


    
    
    <style>
#animation
{
  
  background-color:#ff0000;
  width:100px;
  height:100px;
  -webkit-transition:0.5s ease all;
  -webkit-transform:width:10px ;
  -moz-transition:0.5s ease all;
  -moz-transform:width:10px ;
  -o-transition:0.5s ease all;
  -o-transform:width:10px ;
  -ms-transition:0.5s ease all;
  -ms-transform:width:10px;
  
  transition:0.5s ease all;
  transform:width:10px ;;
}


#animation.transition1
{
  
  background-color:#e6a529;
  width:200px;
  height:100px;


}
            
#animation.transition2
{
  
  background-color:#ffeb00;
  width:400px;
  height:100px;


}
    
#animation.transition3
{
  
  background-color:#000aff;
  width:600px;
  height:100px;


}
        
#animation.transition4
{
  
  background-color:#00ff31;
  width:800px;
  height:100px;


}    
</style>
    
    
<script>
function toggle()
{
  var animation=document.getElementById("animation");
  animation.className=animation.className=="transition0" ? 
  "transition1" : 
  "transition2" ;
  "transition3" ; /* SI BLOCCA QUANDO AGGIUNGO LA 3 E LA 4 TRANSIZIONE SOSTITUENDO ; CON : */
  "transition4" ;
}
    
    function toggle2()
{
  var animation=document.getElementById("animation");
  animation.className=animation.className=="transition2" ? 
  "transition1" : 
  "transition0" ;
}
</script>




</body>
</html>

**Franco85** · 24-11-2015, 22:08

non c'è nessuno che potrebbe spiegarmi dove sbaglio?

oppure che potrebbe indicarmi strade alternative?

**cavicchiandrea** · 24-11-2015, 23:23

Usa if ed else per eseguire le verifiche il "ternario" in questo caso complica

**Franco85** · 25-11-2015, 00:07

Grazie Andrea, c'ho provato, non riesco a farlo funzionare....sicuramente faccio qualche errore di sintassi....

perdonami, mi potresti spiegare alla pratica come estendere lo script?

**cavicchiandrea** · 25-11-2015, 09:53

codice:

<script>
function toggle()
{
  var animation=document.getElementById("animation");
  if(animation.className=="transition0"){
 animation.className="transition1"}
  else if(animation.className=="transition1"){
animation.className="transition2"}
else if(animation.className=="transition2"){
animation.className="transition3"}
else if(animation.className=="transition3"){
  animation.className="transition4"}
else if(animation.className="transition4"){
 animation.className="transition0"}
}
</script>

**Franco85** · 25-11-2015, 12:14

siiiiiiiiiiiiiiiiiii grande!! ci stavo perdendo la testa da giorni, grazie!

siccome l'animazione si troverà sotto lo sfondo, trasparente solo in parte, ho creato una mappa trasparente in primo piano che cambi "href" ad ogni click dello stesso bottone dell'animazione, posso inserire la classe della mappa nello stesso script dell'animazione oppure farne uno diverso?

**Franco85** · 26-11-2015, 00:59

su questo esempio semplice, ovviamente ne vanno 4 mappe, una per ogni movimento

codice:

 <img src="immagine.jpg" usemap="#mappa1">
<map name="mappa1" id="map1">
  <area href="link1.html" shape="rect" coords="100, 200, 300, 400">
</map>

come faccio a richiamare ogni mappa (e quindi il link) alla pressione dello stesso bottone?

**Franco85** · 27-11-2015, 23:01

ho creato questo script sulla base di quello che ho imparato nel precedente post ma.....

codice:

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    
<body>


<a id="object" class="obclass"  href="http://www.link1.html"></a>






    <button onclick="toggle()"><h3>clicca</h3></button>
    
    
<style>
.obclass{
    width:300px; 
    height:300px;
    background-image: url();
    background-color: rgb(0, 0, 0);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
     }
    
button{
    top:310px;
    position:absolute;
     }
    
    
    </style>




<script>
function toggle() {
       var object=document.getElementById("object");
       if (object.className="obclass"){object.href="http://www.link2.html"}
  else if (object.className="obclass"){object.href="http://www.link3.html"}
  else if (object.className="obclass"){object.href="http://www.link4.html"}
}
</script>


</body>
</html>

si blocca al "link2"

...non capisco come andare avanti, cosa ho sbagliato?

**cavicchiandrea** · 28-11-2015, 09:38

if(oggetto == valore) consiglio un ripasso

Discussione: Richiamare transizioni css con Javascript

Strumenti discussione

Ricerca discussione

Visualizza

Richiamare transizioni css con Javascript

Permessi di invio