come attendere il completamento della transizione css prima di applicare la prossima classe

Sto cercando di far "oscillare" il testo, applicando una transizione di rotazione in un modo, seguita da una rotazione nel modo successivo, quando si passa il mouse sopra. Tuttavia, non aspetta che la prima transizione sia completata, quindi sembra che sia stata applicata solo l'ultima transizione. Come posso costringerlo ad aspettare il completamento della prima transizione? JSfiddle: http://jsfiddle.net/hari_shanx/VRTAf/7/come attendere il completamento della transizione css prima di applicare la prossima classe

HTML:

<div id="chandelier"> 
    <nav> 
     <ul id="chandelier-list"> 
      <li id="logo-home" class="swing"><a href="#home" class="scrollPage">home</a> 

      </li> 
      <li id="logo-about" class="swing"><a href="#about" class="scrollPage">about us</a> 

      </li> 
      <li id="logo-range" class="swing"><a href="#range" class="scrollPage">our range</a> 

      </li> 
      <li id="logo-contact" class="swing"><a href="#contact" class="scrollPage">contact us</a> 

      </li> 
      <li id="logo-blog" class="swing"><a href="#blog" class="scrollPage">blog</a> 

      </li> 
     </ul> 
    </nav> 
</div>

CSS:

.swing { 
    position: absolute; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    writing-mode: lr-tb; 
    -webkit-transform-origin: right top; 
    -moz-transform-origin: right top; 
    -ms-transform-origin: right top; 
    -o-transform-origin: right top; 
    transform-origin: right top; 
    font-size: 18px; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 
.swing1 { 
    -webkit-transform: rotate(-80deg); 
    -moz-transform: rotate(-80deg); 
    -o-transform: rotate(-80deg); 
    transform: rotate(-80deg); 
} 
.swing2 { 
    -webkit-transform: rotate(-97deg); 
    -moz-transform: rotate(-97deg); 
    -o-transform: rotate(-97deg); 
    transform: rotate(-97deg); 
} 
.swing3 { 
    -webkit-transform: rotate(-85deg); 
    -moz-transform: rotate(-85deg); 
    -o-transform: rotate(-85deg); 
    transform: rotate(-85deg); 
} 
.swing4 { 
    -webkit-transform: rotate(-92deg); 
    -moz-transform: rotate(-92deg); 
    -o-transform: rotate(-92deg); 
    transform: rotate(-92deg); 
} 
.swing5 { 
    -webkit-transform: rotate(-89deg); 
    -moz-transform: rotate(-89deg); 
    -o-transform: rotate(-89deg); 
    transform: rotate(-89deg); 
} 
#logo-home { 
    top: 0; 
    left: -32px; 
} 
#logo-about { 
    top: 0; 
    left: -17px; 
} 
#logo-range { 
    top: 0; 
    left: 14px; 
} 
#logo-contact { 
    top: 0; 
    left: 48px; 
} 
#logo-blog { 
    top: 0; 
    left: 135px; 
} 
#chandelier nav ul li a { 
    text-decoration: none; 
} 
#chandelier nav ul { 
    list-style-type: none; 
}

JS:

$('.swing').hover(

function() { 
    $(this).addClass('swing1'); 
    $(this).addClass('swing2'); 
}, 

function() { 
    $(this).removeClass('swing1'); 
    $(this).removeClass('swing2'); 
});

fonte

2013-09-03 babbaggeii

Eventuali duplicati di http://stackoverflow.com/questions/2087510/callback-on-css-transition –

Questa risposta potrebbe aiutare: http://stackoverflow.com/a/3679459/1665625 – lukeseager

Ogni browser ha il proprio evento che è possibile utilizzare per rilevare end di transizione, solo legare in questo modo:

$(".yourClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() { 
     //doSomething 
    });

fonte

2013-09-03 13:03:36 Tomzan

Questo si lega a tutti transizioni, ad es 'scale' e' ruotare'. C'è un modo per legarsi solo a una transizione specifica? –

Una possibile passeggiata è di usare classi diverse per ogni transizione che si desidera attendere e usare la funzione 'on()' su di esse. –

Come possiamo farlo senza usare JQuery? – prime

Che ne dici di applicare una sola classe con jQuery, quindi lasciare che CSS faccia il resto. È possibile utilizzare la percentuale di tempo nei fotogrammi chiave per determinare cosa succede durante l'animazione. In questo modo:

@keyframes name { 
    0% { transform: rotate(0deg); } 
    50% { transform: rotate(-20deg); } 
    100% { transform: rotate(360deg); } } 
@-o-keyframes name { 
    0% { -o-transform: rotate(0deg); } 
    50% { -o-transform: rotate(-20deg); } 
    100% { -o-transform: rotate(360deg); } } 
@-moz-keyframes name { 
    0% { -moz-transform: rotate(0deg); } 
    50% { -moz-transform: rotate(-20deg); } 
    100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes name { 
    0% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(-20deg); } 
    100% { -webkit-transform: rotate(360deg); } }

fonte

2013-09-03 13:03:45 Coop

+1 ottimo suggerimento (appena menzionato lo stesso nell'altra domanda dell'utente). ma questo funzionerebbe solo su browser che supportano i 'keyframes' giusto? sembra che solo IE 9 o meno siano eccezioni. [Link] (http://caniuse.com/#search=keyframes) – Harry

@Harry Sì, è corretto, ma il CSS originale dell'OP utilizza già la trasformazione e la transizione e il supporto del browser è lo stesso per loro. – Coop

Per le transizioni CSS3 con jQuery Io suggerisco di usare jquery.transit. Fornisce un jquery.animate come API e callback che potrebbero funzionare nel tuo caso.

fonte

2013-09-03 13:10:24 Mythli

come attendere il completamento della transizione css prima di applicare la prossima classe

risposta

Problemi correlati