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

Question

我正在尝试在具有焦点输入框的元素上使用 CSS 动画。我的用例是一个有两个或更多页面的弹出框。 “页面”是使用 CSS 转换向左/向右滑动的单个容器。

一切都很好，直到我想让第 2 页上的输入字段专注于导航到该页面。整个 CSS 动画都搞砸了。我可以为我用来聚焦输入框的 jQuery focus() 函数尝试超时，但我不喜欢将超时与 CSS 转换时间混合在一起（我猜这不是正确的做法）。

我在最新的 Chrome/Firefox/IE 中看到了这种行为，并在这个小提琴中复制了它：

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

如果您将注释掉的 focus() 行注释掉，您可以看到预期的动画

这里的相关代码只是：

Javascript：

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

CSS：

.page2 {
    left: -100%;
}

我也尝试过（并且，在我的实际项目中，现在是）对 CSS 动画使用 translateX 转换。完全相同的问题。

我不认为我会找到使输入真正正确动画的修复程序，但我想不出任何潜在的解决方法来在动画之后聚焦。感谢您对此的任何帮助！提前致谢。

Answer 1

看这里：

DEMO

您必须在此处使用 CSS 过渡结束事件绑定器，它可以完成这项工作。

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

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