how to wait for css transition to finish before applying next class

Question

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

This answer might help you: http://stackoverflow.com/a/3679459/1665625 — lukeseager, Sep 03 '13 at 12:58

score 46 · Answer 1 · answered Sep 03 '13 at 13:03

46

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

answered Sep 03 '13 at 13:03

Tomzan

2,808
14
25

This binds to all transitions, e.g. `scale` and `rotate`. Is there a way to bind to just a specific transition end? – Joshua Pinter Jan 10 '15 at 00:49
1

A possible walk around is to use different classes for each transition you want to wait for and use `on()` function on them. – Adrian Menendez Nov 18 '15 at 16:58
3

How can we do this without using JQuery ? – prime Sep 17 '17 at 16:49
@prime addEventListener() I'd assume – Neithan Max Dec 17 '19 at 07:52
As of 2022, [CanIUse](https://caniuse.com/?search=transitionend) reports that all browsers (except Opera Mini, which doesn't support transitionEnd at all) use the unprefixed event – Juanjo Martinez Dec 12 '22 at 09:51

score 4 · Answer 2 · answered Sep 03 '13 at 13:03

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:

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

+1 very good suggestion (just now mentioned the same in the user's other question). but this would work only on browsers that support `keyframes` right? seems like only IE 9 or less are exceptions. [Link](http://caniuse.com/#search=keyframes) — Harry, Sep 03 '13 at 13:05
@Harry Yes that's correct but the OP's original CSS already uses transform and transition, and browser support is the same for them. — CaribouCode, Sep 03 '13 at 13:09

score 1 · Answer 3 · answered Sep 03 '13 at 13:10

1

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.

answered Sep 03 '13 at 13:10

Mythli

5,995
2
24
31

how to wait for css transition to finish before applying next class

3 Answers3

Linked