Question

我正在尝试在具有焦点输入框的元素上使用CSS动画。我的用例是一个包含两个或更多页面的弹出框。＆＃34;页面＆＃34;是一个使用CSS过渡左/右滑动的单个容器。

在我希望第2页上的输入字段专注于导航到该页面之前，一切都很棒。整个CSS动画搞砸了。我可以尝试使用jQuery focus（）函数暂停我用来聚焦输入框，但我不喜欢将超时与CSS转换时间混合（我猜这不是正确的事情要做。）

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

如果您注释掉所注明的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%;
}

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

我不认为我会找到一个解决方案来使输入实际上正常动画，但我无法想到在动画之后进行聚焦的任何可能的解决方法。我很感激这个帮助！提前谢谢。

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

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

1 个答案: