为什么调用focus()会破坏我的CSS转换

Question

这个html文件显示了一个3面板布局。"上的css转换；"左"；属性在我更改面板时给了我一个很好的滑动效果。这一切都有效，但当我更改面板时，我想将焦点放在新面板中的输入上。有人能告诉我为什么对focus（）的调用破坏了css转换，并使我在两个面板之间停留了一半吗？它只会在未来发生。如果我注释掉转换，它会起作用，如果我将对focus（）的调用延迟一个超时，它也会起作用。

问题出现在Chrome、IE和Firefox中。

var panelContainer;
var panels = new Array();
var numPanels;
var currentPanel = 0;
window.addEventListener('load', init, false);
function init() {
  setTimeout(function() {
    window.scrollTo(0, 1);
  }, 10); //hiding the browser address bar in iPhone/Android
  panelContainer = document.getElementById("panelContainer");
  panels = document.getElementsByClassName("panel");
  numPanels = panels.length;
  sizeResize();
}
function sizeResize() {
  panelContainer.style.width = (numPanels * window.innerWidth) + "px";
  panelContainer.style.height = window.innerHeight + "px";
  for (var i = 0; i < numPanels; i++) {
    panels[i].style.width = window.innerWidth + "px";
    panels[i].style.height = window.innerHeight + "px";
  }
  slide();
}
window.onresize = sizeResize;
function slide(panel) {
  if (panel != undefined)
    currentPanel = panel;
  panelContainer.style.left = -(window.innerWidth * currentPanel) + "px";
  if (panel >= 0) {
    panels[panel].getElementsByTagName("input")[0].focus(); //shows problem
    //window.setTimeout(function () { panels[panel].getElementsByTagName("input")[0].focus() }, 100);//no problem
  }
}

#wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}
#panelContainer {
  position: relative;
  transition: left 1000ms ease;
}
.panel {
  float: left;
}

<div id="wrapper">
  <div id="panelContainer">
    <div id="panel0" class="panel" style="background-color: #888;">
      panel zero
      <input id="btn0" class="focussable" type="button" onclick="slide(1);" value="forward" />
    </div>
    <div id="panel1" class="panel" style="background-color: #AAA;">
      panel 1
      <input id="btn1" class="focussable" type="button" onclick="slide(2);" value="forward" />
      <input type="button" onclick="slide(0);" value="back" />
    </div>
    <div id="panel2" class="panel" style="background-color: #CCC;">
      panel 2
      <input id="btn2" class="focussable" type="button" onclick="slide(1);" value="back" />
    </div>
  </div>
</div>

Answer 1

正如@user1585345正确指出的那样，浏览器会立即滚动到焦点元素，以便将其带入当前视图，而不是再滚动一个像素！

这里发生的情况如下：您更改了元素的相对位置，但立即更改了焦点，因为事件触发时聚焦的元素不可见，因此内容也滚动（突然结束动画）。

只有当动画完成时，才应该明确地激发焦点，这样浏览器就可以识别出不需要滚动。

一种解决方案是（由@Mark建议）

有两个事件侦听器"contransitionined"one_answers"onanimationed"你可以为添加一个事件，然后启动你的focus（）函数

Answer 2

正如另一个答案中所提到的，focus()滚动到元素，并在视觉上打断任何中间流的转换。

如果您不想依赖监听器，并且根据您的需求，可以在调用focus()方法时使用preventScroll: true标志。

input.focus({ preventScroll: true })

请参阅此处的MDN文档，并检查浏览器兼容性。并非所有浏览器都支持这一点，但其中许多浏览器都支持。