Как исправить / обойти несоответствие в реализациях браузера события transitionend для переходов CSS3? - PullRequest
Новая
       24

Как исправить / обойти несоответствие в реализациях браузера события transitionend для переходов CSS3?

1 голос
/ 08 декабря 2011

Я настроил jsfiddle здесь , чтобы показать некоторые несоответствия, которые я заметил.

  • Опера бросает «бонусные» события перехода для вас, чтобы увернуться ...
  • Firefox, вероятно, так и должно быть, что все еще расстраивает ...
  • Chrome предсказуемо отлично , даже делая для меня предположения, как event.target.style["margin-left"], дающий правильное значение вместо того, чтобы требовать от меня event.target.style[event.propertyName.toCamelCase()]

Я хотел бы знать самый чистый из возможных единый подход к этому. Спасибо.

Ответы [ 2 ]

1 голос
/ 15 декабря 2011

К сожалению, учитывая несопоставимое состояние браузерных реализаций события transitionend, кажется наилучшим подходом является проверка того, что event.propertyName REALLY - это свойство, которое вы ищете , Это можно сделать, сравнив его с известными object или string, в которых содержится карта свойств, которые должны переходить. Текущее решение, которое я использовал: 

function transitionEndHandler(event) {
    if(
        (
            (event.propertyName in event.target.style) && 
            // BLESS CHROME'S HEART THIS IS ALL I NEED TO CHECK FOR THEM

            (event.target.style.cssText.indexOf(event.propertyName) !== -1) 
            // FIREFOX WILL PASS THIS CONDITION, AS IT DOESN'T THROW EVENTS FOR PROPERTIES YOU DIDN'T SPECIFICALLY BIND

        ) || 
        (
            (event.propertyName.replace(/-([a-z])/gi, function(s, group1) {
            // OPERA SURE DOESN'T WANT TO MAKE THIS EASY, IT WONT FIND A 'margin-left' in STYLE
            // SO I HAVE TO LOOK FOR 'marginLeft' INSTEAD THIS MAKES event.propertyName and event.target.style
            // ESSENTIALLY USELESS INSIDE THE TRANSITIONEND EVENT HANDLER
                    return group1.toUpperCase();
                }) in event.target.style) && 
            (event.target.style.cssText.indexOf(event.propertyName) !== -1)
            // AGAIN WE HAVE TO CHECK TO MAKE SURE WE ACTUALLY 'SET' THIS STYLE PROPERTY ON THE ELEMENT
            // AS OPERA THROWS AN TRANSITIONEND EVENT FOR opacity WHEN YOU SET marginLeft
        )
    ) {
        // THIS EVENT.PROPERTYNAME, IS ACTUALLY A PROPERTY I TRANSITIONED,
        // NOT JUST ANY PROPERTY THE BROWSER DECIDED IT WANTED TO TRANSITION FOR ME
    }
}
0 голосов
/ 08 декабря 2011

Чтобы обойти Opera, я анимировал свойство, которое не было бы визуально очевидным 

element.addEventListener(transition_event,function(ev){
    if(ev.propertyName == "min-width") {
      // do stuff;
    }
}, false);

Это может (или нет) удовлетворить ваши потребности.

...