Verzögerungen und Stocken bei transitions
Hallo,
ich habe jetzt schon des Öfteren das Phänomen gehabt, dass transitions verzögert bzw. abgehackt laden. Teste ich die transitions z. B. isoliert in einer einzelnen HTML-Seite, funktionieren sie problemlos und laufen in eins durch.
Aktuell habe ich z. B. ein input-Feld, das sich vergrößert, wenn man drauf klickt, dazu eine transition, die das Ganze etwas mehr gleiten lassen soll. Ist nicht besonderes, gravierendes:
HTML-Code:
#ctrl_keywords_19 {
max-width: 128px
transition: all 0.2s ease;
}
#ctrl_keywords_19:focus {
max-width: 300px;
width: 300px;
}
<input name="keywords" id="ctrl_keywords_19" class="text" value="" type="search">
Klicke ich das nun an, habe ich anfangs eine kurze Animation, danach stockt es dann und springt dann weiter, das geht bei den 0.2 Sekunden noch recht schnell, und man muss drauf achten, aber man sieht es recht schnell. Ändere ich die Zeit z. B. auf 2s, lädt sie zu einen gewissen Zeitpunkt, stockt dann, sodass man es merkt und springt dann zum Ende.
Isoliere ich das in einer HTML-Datei läuft die Animation flüssig ab, egal welche Zeit ich eingebe und ob ich bei der transition-property width oder all wähle. Der Wert width ist hier bei Contao dann gar nicht zu gebrauchen.
Hat jemand ähnliche Erfahrungen gemacht und/oder kennt hier Lösungsansätze?
Viele Grüße
Markus
