jsfiddle here

这是特定于IE的错误,我正在寻找解决方法。

当我将CSS transform: translate应用于具有焦点的文本输入并将transition设置为有效值时,在元素移动时,光标停留在旧位置。

一旦开始键入,它将移动到正确的位置,但是在此之前,光标会顽固地闪烁在旧位置。

这段代码说明了问题……再次,这是IE特定的错误。

var toggleTop = function(){
    $('.input-container').toggleClass('top');
    $('#the-input').focus();
}

$('#the-button').click(toggleTop);
.input-container {
    top: 100px;
    left: 100px;
    position: fixed;
    transition: all 1s;
}

.input-container.top {
    transform: translateY(-100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-container'>
    <input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>

最佳答案

有什么原因为什么您不能等到转换结束才专注于元素?考虑到您正在使用CSS转换,您应该可以访问transitionend事件。
这样可以解决问题:

var toggleTop = function () {
    var inputContainer = $('.input-container'),
        input = inputContainer.find('#the-input');

    inputContainer.toggleClass('top');

    inputContainer.one('transitionend', function () {
        input.focus();
    });
};


$('#the-button').click(toggleTop);

Updated JSFiddle

07-24 09:44
查看更多