Ergebnis 1 bis 9 von 9

Thema: Verzögerungen und Stocken bei transitions

  1. #1
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard 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

  2. #2
    Contao-Fan Avatar von Contao-Academy
    Registriert seit
    09.04.2011.
    Ort
    Kempten
    Beiträge
    292
    Partner-ID
    10079
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hi,

    ich hab das bei mir gerade mal auf einem Formular nachgestellt und konnte mit Chrome kein Problem feststellen.

    Kannst du einen Link zur Seite posten?

    Hast du schon mal einen anderen Browser oder an einem anderen Computer getestet?

    Denn eigentlich kann Contao auch nichts anders als eine HTML-Datei erstellen.

    Viele Grüße
    Christian

  3. #3
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Ein Link wär wirklich gut.
    Nicht jedes CSS ist gleich performant. Wenn man es "ungünstig" zusammensetzt, dann kann es schon stocken.
    Du solltest also mal über die Browsertools die Performance Deines CSS-Codes prüfen.

  4. #4
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Was ist denn sonst noch auf der Seite? Vielleicht ist der Browser (welcher eigentlich?) ja anderweitig voll ausgelastet...

  5. #5
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard

    Moin,

    leider komme ich jetzt erst dazu zu antworten. Es tritt bei mir in allen Browsern (FF, Chrome, Opera) auf, in denen ich es getestet habe, lediglich beim IE läuft alles flüssig... Einen Link kann ich so leider nicht rausgeben. Ich habe das auch an anderen Computern getestet und habe auch da ein stocken, allerdings hier mal mehr mal weniger. Ansonsten sind auf der Seite noch ein paar jQuery-Scripte, allerdings auch nichts großes, insgesamt sind es 3 eher kleinere Anpassungen.

    Inwiefern meinst du das mit "ungünstig" zusammensetzen? Allgemein die Anordnung in der CSS-Datei oder noch etwas anderes? Den Code von der entsprechenden Stelle habe ich ja oben gepostet.

    Viele Grüße
    Markus

  6. #6
    Contao-Urgestein
    Registriert seit
    20.09.2012.
    Ort
    Lüneburger Heide
    Beiträge
    1.999
    Partner-ID
    12207
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Moin,

    hast Du einen Link?

    Gruß
    tschero
    Autodidakt und HobbyWebdesigner

    www.webdesign24.biz
    Screencasts zu Contao

  7. #7
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Zitat Zitat von Sukrams Beitrag anzeigen
    Inwiefern meinst du das mit "ungünstig" zusammensetzen? Allgemein die Anordnung in der CSS-Datei oder noch etwas anderes? Den Code von der entsprechenden Stelle habe ich ja oben gepostet.
    Aus deinem Code oben sieht man nur, dass das eine Element vergrößert wird.
    Je nachdem, wie dieses Element in der Seite eingebettet ist, kann sich die Größenänderung aber auf einige (oder viele) andere Elemente auswirken und der Browser muss das gesamte Layout der Seite neu berechnen. Das kann dann auch erst ab einer gewissen Breite passieren. Vielleicht werden durch die Größenänderungen auch Scripte getriggert... Das hängt sehr von der konkreten Seite ab.

    Schau mal nach, ob dein Eingabefeld in einem Container liegt, der schon anfangs genug Platz für die große Version bietet.

    Gruß, folkfreund

  8. #8
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    813

    Standard

    Vielleicht macht es einen Unterschied, wenn du dem Inputfeld schon per default eine width gibst.

    Auch nützlich:

    http://csstriggers.com/

  9. #9
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard

    Danke für eure Antworten! Das bringt mich denke ich schon mal etwas weiter und ich werde mir das dann mal nächste Woche live anschauen und ggfs. wieder berichten, ob es geholfen hat

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •