Diese HTML-Datei zeigt ein Layout mit drei Feldern. Ein CSS-Übergang auf der "linken" Eigenschaft gibt mir einen schönen Gleiteffekt, wenn ich die Panels ändere. Alles funktioniert, aber wenn ich die Panels ändere, möchte ich den Fokus auf eine Eingabe im neuen Panel legen. Kann mir jemand sagen, warum der Aufruf von focus () den css-Übergang unterbricht und mich halbwegs zwischen zwei Panels landet? Es passiert nur vorwärts. Es funktioniert, wenn ich den Übergang auskommentiere, und es funktioniert, wenn ich den Aufruf von Fokus () mit einem Timeout verzögere.
Das Problem tritt in Chrome, IE und Firefox auf.
%Vor%Wie @ user1585345 korrekt feststellte, scrollt ein Browser sofort zum fokussierten Element, um es in die aktuelle Ansicht zu bringen, und nicht einen weiteren px!
Was hier passiert, ist folgendes: Sie ändern die relative Position Ihres Elements, aber Sie ändern sofort den Fokus, da die fokussierten Elemente, wenn das Ereignis ausgelöst wird, nicht sichtbar sind, scrollt der Inhalt auch (endet mit der Animation abrupt).
Sie sollten Ihren Fokus nur dann explizit auslösen, wenn die Animation abgeschlossen ist, sodass der Browser erkennt, dass kein Bildlauf erforderlich ist.
Tags und Links javascript html5 css-transitions