Verwendung: Eigene Animation wiederholen mit does-repeat

Uwe's Avatar

Uwe

26 Feb, 2021 11:13 AM

Produkt: Slider Pro Contao
Contao-Version: 4.10.7

Hallo ihr Lieben,

wir haben folgende Problemstellung: Innerhalb eines Slides haben wir eine eigene Animation per HTML-Element eingebaut (unter Verwendung von animate.css). Für die Tao-Elemente (z. B. Feature-Box) gibt es ja die Möglichtkeit, per Klassenvergabe "does-repeat" die Animation bei jedem Durchlauf / Erscheinen des jeweiligen Slides erneut abzuspielen.

Kann man diese Funktion auch für die angesprochene eigene Animation verwenden? Falls ja, wie? Falls nein, gibt es vielleicht eine andere Möglichkeit?

Besten Dank für eine Antwort
Uwe

  1. Support Staff 1 Posted by RockSolid Theme... on 26 Feb, 2021 02:00 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Kann man diese Funktion auch für die angesprochene eigene Animation verwenden?

    Ja, CSS-Animationen können Sie „neu starten“ indem die CSS-Eigenschaft animation auf none und danach wieder zurückgesetzt wird.

    Damit das im Slider für jeden neuen Slide geschieht können Sie z. B. folgenden JavaScript-Code einsetzen:

    jQuery('.mod_rocksolid_slider').on('rsts-slidestop', function() {
      var animatedElements = jQuery(this).find('.does-repeat');
      animatedElements.css('animation', 'none');
      animatedElements.height();
      animatedElements.css('animation', '');
    });
    
  2. 2 Posted by Uwe on 27 Feb, 2021 10:29 AM

    Uwe's Avatar

    Hallo,

    vielen, vielen Dank für die schnelle HIlfe. Funktioniert einwandfrei. Wenn man statt 'rsts-slidestop' 'rsts-slidestart' einsetzt, läuft die Animation auch korrekt ab, sprich die Elemente bewegen sich von ihrem Startpunkt zum Endpunkt beim Erscheinen des Slides. Bei rsts-slidestop stehen sie bereits am Endpunkt und die Animation beginnt erneut (unschöner Sprung-Effekt, wenn ihr wisst, was ich meine).

    Aber generell toller Support! Nochmals Merci, schöne Grüße
    Uwe

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac