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