在包含焦點輸入框的元素上使用CSS動畫

我想在具有焦點輸入框的元素上使用CSS動畫。我的用例是一個包含兩個或更多頁面的彈出框。「頁面」是使用CSS轉換向左/向右滑動的單個容器。在包含焦點輸入框的元素上使用CSS動畫

一切都很好，直到我想要在第2頁上有一個輸入字段時，請專注於導航到該頁面。整個CSS動畫被搞砸了。我可以嘗試使用jQuery focus（）函數的超時來聚焦輸入框，但我不喜歡用CSS過渡時間來混合超時（並且我猜測這不是正確的做法）。

我見過在最新的Chrome /火狐/ IE此行爲，並在此撥弄複製了它：

如果你發表意見指出對焦（）線出來，你可以看到預期的動畫

這裏的相關代碼就是：

的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動畫平移X改造也試過（和，在我的實際項目，我現在）。完全相同的問題。

我不認爲我會找到一個修復，使輸入實際上正確的動畫，但我想不出任何潛在的解決方法，以聚焦後的動畫。我很感激任何幫助！提前致謝。

來源

2014-07-14 addMitt

到這裏看看：

DEMO

你將不得不在這裏使用一個CSS過渡結束事件綁定，這將做的工作。

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

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

來源

2014-07-14 18:40:04 j809

儘管動畫仍然正常運行，但該演示中的輸入框似乎並未真正集中（在最新的Chrome/Firefox/IE中進行了測試）。 – addMitt

好吧，糾正它......我想似乎沒有其他方法比添加轉換結束事件處理程序。 – j809

在包含焦點輸入框的元素上使用CSS動畫

回答

相關問題