cách đợi chuyển tiếp css để kết thúc trước khi áp dụng lớp tiếp theo

Question

Tôi đang cố gắng chuyển văn bản thành "xoay", bằng cách áp dụng chuyển đổi xoay một chiều, sau đó xoay vòng theo cách tiếp theo, khi di chuột qua. Tuy nhiên, nó không chờ đợi quá trình chuyển đổi đầu tiên được hoàn thành nên có vẻ như chỉ có quá trình chuyển đổi cuối cùng mới được áp dụng. Làm thế nào tôi có thể buộc nó phải đợi cho quá trình chuyển đổi đầu tiên hoàn thành? JSfiddle: http://jsfiddle.net/hari_shanx/VRTAf/7/

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'); 
}); 

Answer 1

Mỗi trình duyệt có sự kiện riêng của mình mà bạn có thể sử dụng để phát hiện cuối chuyển tiếp, chỉ liên kết như sau:

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

Answer 2

Cách chỉ áp dụng một lớp với jQuery, sau đó để CSS thực hiện phần còn lại. Bạn có thể sử dụng phần trăm thời gian trong khung hình chính để xác định điều gì xảy ra trong suốt hoạt ảnh. Giống như vậy:

@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); } } 

Answer 3

Để chuyển tiếp css3 với jquery Tôi đề nghị sử dụng jquery.transit. Nó cung cấp một jquery.animate như api và callbacks mà sẽ làm việc trong trường hợp của bạn.