CSS3-Übergangsereignisse

Gibt es irgendwelche Ereignisse ausgelöst, die von einem element zu prüfen, ob eine css3 transition begonnen hat oder zu Ende?

InformationsquelleAutor der Frage Andreas Köberle | 2010-05-08

  1. 208

    W3C-CSS-Übergänge Entwurf

    Den Abschluss einer CSS-Übergang erzeugt eine entsprechende DOM-Event. Ein Ereignis ausgelöst wird für jede Eigenschaft unterliegt einer übergangsphase. Dies ermöglicht ein content-Entwickler, um Aktionen auszuführen, dass die Synchronisierung mit dem Abschluss der transition.

    Webkit

    Können Sie einen handler für ein DOM-event
    gesendet wird am Ende eines
    übergang. Die Veranstaltung ist eine Instanz
    der WebKitTransitionEvent und seiner Art
    ist webKitTransitionEnd in JavaScript.

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

    Mozilla

    Es ist ein einmaliges Ereignis, das ausgelöst wird, wenn übergänge abgeschlossen. In Firefox ist das event transitionendin der Oper, oTransitionEndund in WebKit-es ist webkitTransitionEnd.

    Opera

    Es ist eine Art von übergang Veranstaltung
    zur Verfügung. Die oTransitionEnd Veranstaltung
    Auftritt bei der Vollziehung der
    übergang.

    Internet Explorer

    Den transitionend Ereignis tritt auf die Vollendung des übergangs. Wenn der übergang wird entfernt vor der Fertigstellung, wird das Ereignis nicht ausgelöst.

    ALSO: Wie kann ich normalisieren CSS3 Transition-Funktionen in allen Browsern?

    InformationsquelleAutor der Antwort Davor Lucic

  2. 70

    War ich mit dem Ansatz gegeben von Pete, aber ich habe jetzt begonnen, mit den folgenden 

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

    Alternativ, wenn Sie die Verwendung von bootstrap kann man dann einfach tun 

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

    Dies ist becuase Sie umfassen die folgenden in bootstrap.js 

    +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 auch eine emulateTransitionEnd Funktion, die möglicherweise erforderlich, um sicherzustellen, ein Rückruf erfolgt immer.

      //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 manchmal dieses Ereignis nicht ausgelöst, in der Regel im Falle
    wenn die Eigenschaften nicht ändern, oder die Farbe ist nicht ausgelöst. Um sicherzustellen, dass wir
    bekomme immer einen Rückruf, wir setzen ein Zeitlimit, das wird das event ausgelöst
    manuell.

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

    InformationsquelleAutor der Antwort Tom

  3. 51

    Allen modernen Browsern jetzt unterstützen die unprefixed Veranstaltung:

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

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

    InformationsquelleAutor der Antwort neave

  4. 16

    In Opera 12, wenn Sie binden mit dem einfachen JavaScript 'oTransitionEnd' funktionieren wird:

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

    allerdings, wenn Sie binden durch jQuery, die Sie verwenden müssen 'otransitionend'

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

    Falls Sie mit Modernizr oder bootstrap-transition.js Sie können einfach tun eine Veränderung:

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

    Finden Sie einige Infos auch hier http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

    InformationsquelleAutor der Antwort Peter

  5. 6

    Nur zum Spaß, tun Sie 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');
});

    InformationsquelleAutor der Antwort yckart

  6. 3

    Wenn Sie wollen einfach nur, um zu erkennen, nur einen einzigen übergang Ende, ohne Verwendung von JS-Frameworks hier ist eine kleine praktische utility-Funktion:

    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;
};

    Verwendung:

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

    dann, wenn du Abbrechen möchtest Sie irgendwann kann es immer noch tun mit

    handler.cancel();

    Ist es gut für die anderen event-Nutzungen 🙂

    InformationsquelleAutor der Antwort OpherV

Schreibe einen Kommentar