Perché calling focus() interrompe la transizione CSS?

This Il file html mostra un layout a 3 riquadri. Una transizione css sulla proprietà "left" mi dà un effetto scorrevole quando cambio i pannelli. Funziona tutto ma, quando cambio i pannelli, voglio mettere a fuoco un input nel nuovo pannello. Qualcuno può dirmi perché il call to focus() interrompe la transizione css e mi atterra a metà strada tra due pannelli? Succede solo andando avanti. Funziona se commento la transizione, e funziona se ritardo la chiamata a focus() con un timeout.Perché calling focus() interrompe la transizione CSS?

Il problema si verifica in Chrome, IE e Firefox.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Sliding Bug</title> 
    <style> 
     #wrapper { 
      width: 100%; 
      height: auto; 
      overflow: hidden; 
     } 

     #panelContainer { 
      position: relative; 
      transition: left 1000ms ease; 
     } 

     .panel { 
      float: left; 
     } 
    </style> 

</head> 
<body> 
    <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> 
    <script> 
     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 

      } 
     } 
    </script> 
</body> 
</html>

fonte

2014-11-06 bbsimonbb

Puoi fornire una demo dal vivo per noi da modificare? –

Per qualsiasi motivo, il mio tentativo di riprodurre questo come jsfiddle non ha funzionato. È possibile salvare il codice localmente e aprirlo in un browser dal proprio file system. Non ho un server Web di fronte scusa scusa. – bbsimonbb

Questa non è una risposta totale, ma forse utile ... I browser hanno regole per lo scorrimento dell'elemento attivo in vista. Queste regole hanno la precedenza su qualunque comportamento tu possa provare a scrivere. Nell'esempio sopra, il tabbing mi ha anche causato problemi. La soluzione per il momento è di gestire l'attenzione in ogni momento. Qualcosa nella pagina deve sempre essere focalizzato e le chiamate a focus() sono fatte all'interno di setTimeout() in modo che le transizioni abbiano la possibilità di completarle. – bbsimonbb

Come @ user1585345 dichiarato correttamente un browser immediatamente pergamene all'elemento mirata al fine di portare dentro la vista corrente, e non un px oltre!

quello che succede qui è il seguente: si cambia la posizione relativa del vostro elemento, ma subito si cambia messa a fuoco, in quanto gli elementi mirati quando l'evento non è visibile il contenuto anche pergamene (che termina l'animazione bruscamente).

È necessario attivare esplicitamente lo stato attivo solo quando l'animazione è completa, in modo che il browser riconosca che non è necessario lo scorrimento.

fonte

2016-12-02 13:43:15 Kuzeko

Perché calling focus() interrompe la transizione CSS?

risposta

Problemi correlati