CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
Danny
Danny

Reputation: 3665

Skipping to end of CSS3 transition

I have an app where I am trying to switch from jQuery .animate to CSS3 transitions to move a list of cards left/right in response to swipe gestures and button presses.

It works great right now, except for one thing. I want the app to move one 'page' of cards at a time per swipe, and the only way I've been able to preserve this has been by preventing swipes while an animation is being performed. Otherwise, the pages suddenly get out of alignment.

That's fine for gesture swipes, but if a user is clicking a button or turning a rotary knob to navigate pages, it should move one page per click. If it's clicked during an animation, I want the animation to skip to the end and start a new animation.

Using jQuery it was easy to clear the animation queue and skip to the end of an animation. This is exactly what I want, but with CSS3. But, so far I haven't been able to figure out how to do that.

Below is an attempt I made to stop a CSS3 transition, but it doesn't seem to work (click the square once to slide, click mid-slide to remove CSS3 transition properties). However, the second click doesn't stop the animation.

http://jsfiddle.net/RnKyz/1/

Any way to skip to the end of an animation?

Upvotes: 0

Views: 2069

Answers (1)

A.M.K
A.M.K

Reputation: 16795

You can "stop" the animation by adding a class before starting the original animation and then removing it when you want to stop it:

Demo: http://jsfiddle.net/SO_AMK/LXqcz/2/

CSS:

#block {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #ff0000;
}

.animate {
    transition: left 2s;
    -moz-transition: left 2s;
    -webkit-transition: left 2s;
    -o-transition: left 2s;
    -ms-transition: left 2s;
}​
​

jQuery: 

$("#block").on("click", function() {
    $(this).addClass("animate").css("left", "300px");

    $(this).off("click");
    $(this).on("click", function() {
        $(this).removeClass("animate");
    });
});​

Note: I simplified code for the demo, complete "fixed" code is here: http://jsfiddle.net/SO_AMK/LXqcz/

Upvotes: 4

Related Questions