在包含焦点输入框的元素上使用CSS动画

Question

I am trying to use CSS animations on an element with a focused input box. My use case is a popup box with two or more pages. The "pages" are a single container that slides left/right using CSS transitions.

Everything was great until I wanted to have an input field on page 2 be focused upon navigating to that page. The entire CSS animation gets screwed up. I could try a timeout for the jQuery focus() function I'm using to focus the input box, but I don't like mixing timeouts with CSS transition times (and am guessing that isn't the proper thing to do).

I've seen this behavior in the latest Chrome/Firefox/IE, and have replicated it in this fiddle:

http://jsfiddle.net/bmh5g/40/

If you comment the noted focus() line out of it, you can see the intended animation

The relevant code here is just:

Javascript:

$('#next').on({
    click: function(){
        //comment the following line out to see proper animation:
        $('#the-input').focus();
        $('.content').addClass('page2');
    }
});

CSS:

.page2 {
    left: -100%;
}

I have also tried (and, on my actual project, am now) using a translateX transformation for the CSS animation. Exact same issue.

I don't think I'll find a fix to make the input actually properly animate, but I can't think of any potential workarounds for focusing after the animation. I appreciate any help with this one! Thanks in advance.

Answer 1

Take a look here:

DEMO

You will have to use a CSS transition end event binder here, which will do the job.

$('#next').on({
    click: function(){
        $('.content').addClass('page2');
    }
});

$(".content").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
    if($(this).hasClass("page2"))
        $('#the-input').focus();
});