CSS3-Übergangsereignisse

Lesezeit: 5 Minuten

CSS3 Ubergangsereignisse
Andreas Köberle

Gibt es Ereignisse, die von einem Element ausgelöst werden, um zu überprüfen, ob ein CSS3-Übergang begonnen oder beendet wurde?

1646319308 220 CSS3 Ubergangsereignisse
Davor Lucic

W3C CSS-Übergangsentwurf

Der Abschluss eines CSS-Übergangs generiert ein entsprechendes DOM-Ereignis. Für jede Eigenschaft, die einem Übergang unterzogen wird, wird ein Ereignis ausgelöst. Dadurch kann ein Entwickler von Inhalten Aktionen ausführen, die mit dem Abschluss eines Übergangs synchronisiert sind.


Webkit

Um festzustellen, wann ein Übergang abgeschlossen ist, legen Sie eine JavaScript-Ereignis-Listener-Funktion für das DOM-Ereignis fest, das am Ende eines Übergangs gesendet wird. Das Ereignis ist eine Instanz von WebKitTransitionEvent und sein Typ ist webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

Es gibt ein einzelnes Ereignis, das ausgelöst wird, wenn Übergänge abgeschlossen sind. In Firefox ist das Ereignis transitionendin der Oper, oTransitionEndund in WebKit ist es webkitTransitionEnd.

Oper

Es ist eine Art von Übergangsereignis verfügbar. Die oTransitionEnd Ereignis tritt bei Abschluss des Übergangs auf.

Internet Explorer

Die transitionend Ereignis tritt bei Abschluss des Übergangs auf. Wenn der Übergang vor Abschluss entfernt wird, wird das Ereignis nicht ausgelöst.


Stapelüberlauf: Wie normalisiere ich CSS3-Übergangsfunktionen über Browser hinweg?

  • Beachten Sie, dass das Ereignis in Firefox „transitionend“ und in Opera „oTransitionEnd“ heißt

    – Andreas Köberle

    13. Mai 2010 um 20:25 Uhr

  • Niemand hat etwas über den Übergangsstartteil der Frage erwähnt. Gibt es keine Möglichkeit, einen Ereignishandler zu registrieren, der vor Beginn des Übergangs ausgelöst werden soll?

    – Tyler

    31. August 2011 um 17:07 Uhr

  • Gibt es jetzt einen Standardweg, um dies zu erreichen? 2 Jahre sind eine lange Zeit! Die Dinge haben sich wahrscheinlich geändert.

    – Leichter Flaum

    22. Mai 2012 um 15:52 Uhr

  • @tyler Ich weiß nicht, wie ich das Fehlen von Übergängen umgehen soll.

    – Davor Lucic

    22. Mai 2012 um 16:43 Uhr

  • Die mit @Mild Fuzz verknüpfte Stackoverflow-Frage hat eine interessante Lösung.

    – Davor Lucic

    22. Mai 2012 um 16:43 Uhr

CSS3 Ubergangsereignisse
Tom

Aktualisieren

Alle modernen Browser unterstützen jetzt das Ereignis ohne Präfix:

element.addEventListener('transitionend', callback, false);

https://caniuse.com/#feat=css-transitions


Ich habe den von Pete angegebenen Ansatz verwendet, aber ich habe jetzt begonnen, den folgenden zu verwenden

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

Wenn Sie Bootstrap verwenden, können Sie dies alternativ einfach tun

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

Dies liegt daran, dass sie Folgendes in bootstrap.js enthalten

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }


  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

Beachten Sie, dass sie auch eine emulateTransitionEnd-Funktion enthalten, die möglicherweise erforderlich ist, um sicherzustellen, dass ein Rückruf immer erfolgt.

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

Beachten Sie, dass dieses Ereignis manchmal nicht ausgelöst wird, normalerweise dann, wenn sich die Eigenschaften nicht ändern oder eine Farbe nicht ausgelöst wird. Um sicherzustellen, dass wir immer einen Rückruf erhalten, legen wir ein Timeout fest, das das Ereignis manuell auslöst.

http://blog.alexmaccaw.com/css-transitions

  • So etwas kann man nicht machen. In einigen Fällen wird Callback mehr als einmal ausgelöst.

    – Sebastian

    7. Juni 2013 um 13:57 Uhr

  • In Browsern, die sowohl die vorangestellten als auch die regulären Ereignisnamen beibehalten. Sie können dies umgehen, indem Sie .one anstelle von .on verwenden

    – AlexG

    26. Juli 2013 um 23:14 Uhr

  • Nur zur Info: Die erste Lösung sieht nett und praktisch aus, verursacht aber ein Speicherleck: codepen.io/jjd/pen/ZEpGGqG Um dies zu vermeiden, benennen Sie alle Ereignisnamen und deregistrieren sie explizit. Andernfalls fügen Sie jedes Mal, wenn der Code ausgeführt wird, eine Reihe von Ereignis-Listenern hinzu, die nie bereinigt werden. $(.myClass”).one(‘transitionend.namespace webkitTransitionEnd.namespace oTransitionEnd.namespace otransitionend.namespace MSTransitionEnd.namespace’, function() { $(this).off(‘.namespace’); // etwas tun } );

    – Jesse

    30. November 2020 um 13:53 Uhr

1646319309 1 CSS3 Ubergangsereignisse
Nave

Alle modernen Browser jetzt unterstützen das Ereignis ohne Präfix:

element.addEventListener('transitionend', callback, false);

Funktioniert in den neuesten Versionen von Chrome, Firefox und Safari. Sogar IE10+.

Wenn Sie in Opera 12 mit dem einfachen JavaScript binden, funktioniert ‘oTransitionEnd’:

document.addEventListener("oTransitionEnd", function(){
    alert("Transition Ended");
});

Wenn Sie jedoch über jQuery binden, müssen Sie „otransitionend“ verwenden.

$(document).bind("otransitionend", function(){
    alert("Transition Ended");
});

Falls Sie Modernizr oder bootstrap-transition.js verwenden, können Sie einfach eine Änderung vornehmen:

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

Auch hier finden Sie einige Informationen http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

CSS3 Ubergangsereignisse
yckart

Nur zum Spaß, tu das nicht!

$.fn.transitiondone = function () {
  return this.each(function () {
    var $this = $(this);
    setTimeout(function () {
      $this.trigger('transitiondone');
    }, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
  });
};


$('div').on('mousedown', function (e) {
  $(this).addClass('bounce').transitiondone();
});

$('div').on('transitiondone', function () {
  $(this).removeClass('bounce');
});

1646319310 846 CSS3 Ubergangsereignisse
OpherV

Wenn Sie einfach nur ein einziges Übergangsende erkennen möchten, ohne ein JS-Framework zu verwenden, finden Sie hier eine kleine praktische Hilfsfunktion:

function once = function(object,event,callback){
    var handle={};

    var eventNames=event.split(" ");

    var cbWrapper=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
        callback.apply(this,arguments);
    };

    eventNames.forEach(function(e){
        object.addEventListener(e,cbWrapper,false);
    });

    handle.cancel=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
    };

    return handle;
};

Verwendungszweck:

var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
   //do something
});

Wenn Sie dann irgendwann kündigen möchten, können Sie dies immer noch tun

handler.cancel();

Es ist auch gut für andere Veranstaltungszwecke 🙂

924520cookie-checkCSS3-Übergangsereignisse

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy