如何在应用下一课之前等待css过渡完成
我试图让文本“摆动”，通过单向旋转过渡，然后旋转下一个方向旋转。 但是，它不会等待第一次转换完成，因此看起来只应用了最后一次转换。 如何强制它等待第一次转换完成？ JSfiddle： http ： //jsfiddle.net/hari_shanx/VRTAf/7/
HTML：
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'); });
每个浏览器都有自己的事件，您可以使用它来检测转换结束，只需像这样绑定：
$(".yourClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() { //doSomething });
如何只使用jQuery应用一个类，然后让CSS完成剩下的工作。 您可以使用关键帧中的时间百分比来确定整个动画中发生的情况。 像这样：
@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); } }
对于使用jquery的css3转换，我建议使用jquery.transit 。 它提供了一个jquery.animate，如api和回调，可以在你的情况下工作。