光標在IE11錯誤的位置CSS變換後的W /過渡

Question

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>

Answer 1

是否有任何理由，你爲什麼不能等待過渡到聚焦元素的前結束？考慮到您使用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

Answer 2

一年過去了，我已經遇到過這個問題爲好。這裏是我用來修正它的angular.js指令，它基於接受的答案的代碼和解釋。

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