我可以檢測一個任意的CSS轉換是否已經開始

Question

在我的關閉函數中，我想在css轉換完成後執行所有DOM清理工作。但是可能沒有任何轉換正在運行/可能是多階段轉換 - （保持樣式表不在我的手中）。

我將如何去寫一個功能類似下面

function close() { 
    myEl.removeClass('open'); 
    if (animation is running/about to be run) { 
    // wait for transition to end, then recursively check to see if another 
    // one has started, wait for that ... 
    // then 
    cleanUpDOM(); 
    } else { 
    cleanUpDOM(); 
    } 
} 

我的想法至今都包裹在超時/ requestAnimationFrame初步檢查，以便給動畫一個機會下手，然後檢查看看它是否在運行。不幸的是，沒有transitionstart事件，我不知道如何檢查轉換是否已經開始。

編輯答案推薦的jQuery是無關緊要的jQuery動畫是動畫的JavaScript，CSS不轉變

Answer 1

關於transitionStart和transitionEnd事件：

的轉變無法從無處開始。通常在某個事件之後開始轉換，其中您通過按類或其他方式更改樣式來更改DOM元素的狀態。所以你知道什麼時候開始轉換，因爲你在你的代碼中啓動它。

在轉換過程中，用戶I/O不會阻塞，因此轉換是異步的，然後轉換將結束，您不知道對不對。所以你需要transitionEnd事件來做一些事情，然後在JavaScript中完成轉換。

關於transitionEnd事件： 只看該jsfiddle

Answer 2

這裏是我的解決方案至今 - 有點哈克並且僅適用時元素可能轉變是已知的，並且不與transition-property: all工作......但這是一個良好的開端

function toCamelStyleProp (str) { 
    return str.replace(/(?:\-)([a-z])/gi, function ($0, $1) { 
     return $1.toUpperCase(); 
    }); 
} 

function toHyphenatedStyleProp (str) { 
    return str.replace(/([A-Z])/g, function (str,m1) { 
     return '-' + m1.toLowerCase(); 
    }).replace(/^ms-/,'-ms-'); 
} 

function getPrefixedStyleProp (prop) { 
    prop = toCamelStyleProp(prop); 
    prop = Modernizr.prefixed(prop); 
    return toHyphenatedStyleProp(prop); 
} 

function getStyleProperty (el, prop) { 
    return getComputedStyle(el,null).getPropertyValue(getPrefixedStyleProp(prop)); 
} 

function doAfterTransition ($wrapper, cssClass, mode, $transitioningEl, callback) { 
    $transitioningEl = $transitioningEl || $wrapper; 

    var transitioningEl = $transitioningEl[0], 
     duration = +getStyleProperty(transitioningEl, 'transition-duration').replace(/[^\.\d]/g, ''), 
     transitioners = getStyleProperty(transitioningEl, 'transition-property').split(' '), 
     initialState = [], 
     changedState = [], 
     i, 
     callbackHasRun = false, 

     //makes sure callback doesn't get called twice by accident 
     singletonCallback = function() { 
      if (!callbackHasRun) { 
       callbackHasRun = true; 
       callback(); 
      } 
     }; 

    // if no transition defined just call the callback 
    if (duration === 0) { 
     $wrapper[mode + 'Class'](cssClass); 
     callback(); 
     return; 
    } 

    for (i = transitioners.length - 1;i>=0;i--) { 
     initialState.unshift(getStyleProperty(transitioningEl, transitioners[i])); 
    } 

    $wrapper[mode + 'Class'](cssClass); 

    setTimeout(function() { 
     for (i = transitioners.length - 1;i>=0;i--) { 
      changedState.unshift(getStyleProperty(transitioningEl, transitioners[i])); 
     } 

     for (i = transitioners.length - 1;i>=0;i--) { 
      if (changedState[i] !== initialState[i]) { 
       $transitioningEl.transitionEnd(singletonCallback); 

       // failsafe in case the transitionEnd event doesn't fire 
       setTimeout(singletonCallback, duration * 1000); 
       return; 
      } 
     } 
     singletonCallback(); 
    }, 20); 
} 

Answer 3

如果你打算做的CSS過渡，你可以檢查出的jQuery插件過境http://ricostacruz.com/jquery.transit/

非常強大和有用的，你可以得到變換x值。例如，css（'x'）。

Answer 4

在animation.css我發現這個。

動畫結束時，您還可以檢測：

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 

read full doc here

Answer 5

沒有辦法（我知道的），以檢測是否轉換​​在後臺目前正不知道該元素正在過渡。但是，如果您可以遠離過渡到關鍵幀動畫，那麼您將擁有如此需要的事件 - animationStart和animationEnd，然後很容易找出是否有正在運行的動畫。

Answer 6

你試過JQuery僞「：動畫」？

如果（$（ELEM）。是（ '：動畫'））{...}

查看更多http://api.jquery.com/animated-selector/

Answer 7

你可以使用jQuery這將是例如更容易你可以使用.animate這樣

(function(){ 
      var box = $('div.box') 
      $('button').on('click', function(){ 
       box.animate({ 'font-size' : '40px'}) 
       .animate({'color': 'red'}); 
      }) 
     })(); 

或者乾脆做一個回調函數

Answer 8

這是一個等待頁面Html變得穩定的函數。即當所有動畫完成時。在下面的例子中，它等待Html不變，持續200毫秒，最大超時時間爲2秒。

調用具有功能...

waitUntilHtmlStable(yourCallback, 200, 2000); 

功能...

waitUntilHtmlStable = function (callback, unchangedDuration, timeout, unchangedElapsed, html) { 
    var sleep = 50; 
    window.setTimeout(function() { 
     var newHtml = document.documentElement.innerHTML; 
     if (html != newHtml) unchangedElapsed = 0; 
     if (unchangedElapsed < unchangedDuration && timeout > 0) 
      waitUntilHtmlStable(callback, unchangedDuration, timeout - interval, unchangedElapsed + interval, newHtml); 
     else 
      callback(); 
    }, sleep); 
}; 

在我來說，我希望確保新的元素，其中存在。如果你想跟蹤動畫運動然後更改document.documentElement.innerHTML到

JSON.stringify(Array.prototype.slice.call(document.documentElement.getElementsByTagName("*"), 0) 
.map(function(e) { 
     var x = e; 
     var r = x.getBoundingClientRect(); 
     while (r.width == 0 || r.height == 0) { 
      x = x.parentNode; 
      r = x.getBoundingClientRect(); 
     } 
     return r; 
    })); 

Answer 9

中有IE10 +前綴的transitionstart事件。它甚至可以取消。

https://msdn.microsoft.com/library/dn632683%28v=vs.85%29.aspx