如何在应用下一个类之前等待css转换完成 [英] how to wait for css transition to finish before applying next class

问题描述

我试图通过单向应用旋转过渡，然后在下一个方向旋转，当悬停在上面时，让文本摆动。然而，它不等待第一个转换完成，所以它看起来像只有最后一个转换正在应用。如何强制它等待第一个转换完成？ JSfiddle： http://jsfiddle.net/hari_shanx/VRTAf/7/

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/

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

推荐答案

每个浏览器都有自己的事件，检测转换结束，只是这样绑定：

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

这篇关于如何在应用下一个类之前等待css转换完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！