带过渡的 CSS 转换后光标在 IE11 中的错误位置答案

【问题标题】：Cursor in wrong position in IE11 after CSS transform w/ transition带过渡的 CSS 转换后光标在 IE11 中的错误位置
【发布时间】：2014-12-24 10:03:58
【问题描述】：

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>

【问题讨论】：

标签： javascript css transform internet-explorer-11 translate-animation

【解决方案1】：

一年过去了，我也遇到了这个问题。这是我用来修复它的 angular.js 指令，基于接受的答案的代码和解释。

angular.module('my.directive')
  .directive('custom-auto-focus', function ($timeout) {
    return {
      link: function (scope, elm) {
        $timeout(function() {
          elm[0].focus();
        }, 350);
      }
    };
  });

【讨论】：

【解决方案2】：

有什么理由让您迫不及待地等待过渡结束后再关注该元素？考虑到您正在使用 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

【讨论】：