Zdarzenia przejściowe CSS3
Czy są jakieś zdarzenia wywołane przez element, aby sprawdzić, czy przejście css3 rozpoczęło się lub zakończyło?
6 answers
W3C CSS Transitions Draft
Zakończenie przejścia CSS generuje odpowiednie zdarzenie DOM. Zdarzenie jest wywoływane dla każdej właściwości, która podlega transformacji. Pozwala to twórcy treści wykonywać działania synchronizujące się z zakończeniem przejścia.
Webkit
Możesz ustawić obsługę zdarzenia DOM który jest wysyłany na końcu Przejście. Zdarzenie jest instancją z WebKitTransitionEvent i jego typ jest webKitTransitionEnd w JavaScript.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
Istnieje pojedyncze zdarzenie, które jest wywoływane po zakończeniu przejść. W Firefoksie zdarzenie to
transitionend
, w OperzeoTransitionEnd
, a w WebKit towebkitTransitionEnd
.
Opera
Istnieje jeden rodzaj zdarzenia przejściowego dostępny. Zdarzenie
oTransitionEnd
występuje po zakończeniu Przejście.
Internet Explorer
Zdarzenie
transitionend
występuje po zakończeniu przejścia. Jeśli przejście zostanie usunięte przed zakończeniem, zdarzenie nie zostanie uruchomione.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:42
Używałem podejścia podanego przez Pete ' a, jednak teraz zacząłem używać następującego
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
Alternatywnie, jeśli używasz bootstrap, możesz po prostu zrobić
$(".myClass").one($.support.transition.end,
function() {
//do something
});
Jest to spowodowane tym, że zawierają one następujące elementy w 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);
Uwaga zawierają one również funkcję emulateTransitionEnd, która może być potrzebna do zapewnienia, że wywołanie zwrotne zawsze występuje.
// 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
}
Należy pamiętać, że czasami to zdarzenie nie odpala, zwykle w przypadku kiedy właściwości nie zmieniają się lub farba nie jest aktywowana. Aby zapewnić nam zawsze otrzymuj oddzwonienie, ustawmy timeout, który wywoła zdarzenie ręcznie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-09 17:02:17
Wszystkie nowoczesne przeglądarki obsługują teraz Zdarzenie unrefixed:
element.addEventListener('transitionend', callback, false);
Działa w najnowszych wersjach Chrome, Firefox i Safari. Nawet IE10+.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-14 12:29:04
W Operze 12 gdy bindujesz przy użyciu zwykłego JavaScript,' oTransitionEnd ' będzie działać:
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
Jednak jeśli bindujesz poprzez jQuery, musisz użyć 'otransitionend'
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
W przypadku, gdy używasz Modernizr lub Bootstrap-transition.js możesz po prostu zmienić:
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
Możesz znaleźć kilka informacji tutaj, jak również http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-29 09:20:27
Tylko dla zabawy, nie rób tego!
$.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');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-30 15:15:33
Jeśli po prostu chcesz wykryć tylko jeden koniec przejścia, bez użycia żadnego frameworka JS, oto mała wygodna funkcja użytkowa:
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;
};
Użycie:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
Następnie, jeśli chcesz anulować w pewnym momencie, nadal możesz to zrobić za pomocą
handler.cancel();
To jest dobre dla innych zastosowań eventowych, jak również:)Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-06 16:37:41