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

Question

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

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

我在最新的 Chrome/Firefox/IE 中看到了这种行为，并在这个 fiddle 中复制了它:

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 过渡结束事件绑定(bind)器，它将完成这项工作。

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

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