jQuery 如何在申请下一堂课之前等待 css 转换完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18592933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to wait for css transition to finish before applying next class
提问by babbaggeii
I'm trying to get text to "swing", by applying a rotation transition one way, followed by a rotation the next way, when hovered over. However, it doesn't wait for the first transition to be completed so it looks like only the last transition is being applied. How can I force it to wait for the first transition to complete? JSfiddle: http://jsfiddle.net/hari_shanx/VRTAf/7/
当鼠标悬停在上方时，我试图通过以一种方式应用旋转过渡，然后以另一种方式旋转来使文本“摆动”。但是，它不会等待第一个转换完成，因此看起来只应用了最后一个转换。如何强制它等待第一次转换完成？JSfiddle：http: //jsfiddle.net/hari_shanx/VRTAf/7/
HTML:
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:
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:
JS：
$('.swing').hover(
function () {
$(this).addClass('swing1');
$(this).addClass('swing2');
},
function () {
$(this).removeClass('swing1');
$(this).removeClass('swing2');
});
回答by Tomzan
Each browser has its own event that you can use to detect transition end, just bind like this :
每个浏览器都有自己的事件，您可以使用它来检测转换结束，只需像这样绑定：
$(".yourClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//doSomething
});
回答by Coop
How about just apply one class with the jQuery, then let CSS do the rest. You can use percentage of time in keyframes to determine what happens throughout the animation. Like so:
只用 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); } }
回答by Mythli
For css3 transitions with jquery I suggest using jquery.transit. It provides a jquery.animate like api and callbacks that would work in your case.
对于使用 jquery 的 css3 转换，我建议使用jquery.transit。它提供了一个 jquery.animate 之类的 api 和回调，适用于您的情况。
