Как поддержать переход без браунинга?

Question

У меня есть javascript, который вызывает некоторые изменения стиля, которые приведут к переходу CSS.

Как подключить обратный вызов, который будет выполнен после завершения перехода. Очевидно, что в старых браузерах он будет мгновенно переходить, но они также не распознают событие перехода.

Что такое лучший способ сделать это краткость связывания различных событий, если ($ .browser.msie & & $ .browser.version < = 9) - что я понимаю, это плохая практика.

Вот краткий пример, чтобы проиллюстрировать мою точку зрения:

HTML

<div>test</div> 

CSS

div { 
    border: 1px solid black; 
    transition: width 2s; 
    width: 5px 
} 

.test { 
    width: 100px; 
} 

JS

$(function(){ 
    $(document).on('transitionend', function(){ 
     alert('transition complete'); 
    }); 
    $('div').addClass('test'); 
}); 

Живая JS скрипку: http://jsfiddle.net/vsDrH/1/

Каков наилучший способ заставить это событие работать в старых браузерах?

Спасибо за любую помощь.

Answer 1

Вы можете проверить, если свойство CSS поддерживается в браузере, как это:

http://jsfiddle.net/vsDrH/3/

function isSupported(property) { 
    return property in document.body.style; 
} 

$(function(){ 
    $(document).on('transitionend', function(){ 
     alert('transition complete'); 
    }); 
    $('div').addClass('test'); 

    if(!isSupported('transition')) { 
     $(document).trigger('transitionend'); 
    } 
}); 

Answer 2

Вы можете посмотреть на исходный код jQuery Transit может. Это очень хорошо написано и самоочевидно.

Принцип здесь прост:

1. Вы получаете имя свойства перехода, нюхать для рендеринга браузера;
2. Далее у нас есть список всех имен событий в разных браузерах, от которых вы получите название события для данного конкретного браузера
3. В любом другом случае, если нет transitionend свойства не существует, то следует рассмотреть возможность реализации setTimeout таймера , для оптимальной эффективности работы с несколькими браузерами.

Javascript (непосредственно из: jQuery Transit Source Code)

// Helper function to get the proper vendor property name. 
// (`transition` => `WebkitTransition`) 

// (1) 

function getVendorPropertyName(prop) { 
    // Handle unprefixed versions (FF16+, for example) 
    if (prop in div.style) return prop; 

    var prefixes = ['Moz', 'Webkit', 'O', 'ms']; 
    var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1); 

    if (prop in div.style) { return prop; } 

    for (var i=0; i<prefixes.length; ++i) { 
     var vendorProp = prefixes[i] + prop_; 
     if (vendorProp in div.style) { return vendorProp; } 
    } 
} 

// (2) 

var eventNames = { 
    'transition':  'transitionEnd', 
    'MozTransition': 'transitionend', 
    'OTransition':  'oTransitionEnd', 
    'WebkitTransition': 'webkitTransitionEnd', 
    'msTransition':  'MSTransitionEnd' 
}; 

var eventName = eventNames[getVendorPropertyName('transition')] || null 

// (3) 

if (eventName) { 
    // Use the 'transitionend' event if it's available. 
    bound = true; 
    element.bind(eventName, cb); 
} else { 
    // Fallback to timers if the 'transitionend' event isn't supported. 
    window.setTimeout(cb, delay); 
} 

Делая это, вы будете 100% уверены, что ваш transitionEnd событие будет срабатывать