始终触发且仅触发一次的“transitionend”事件

我需要一个特别的transitionend-like 事件，在所有转换完成后触发一次，或者如果 CSS 中没有定义转换则立即触发。

这是我到目前为止所想到的：

(function($){

  $.event.special.transitionsComplete = {

    setup: function(data, namespaces, eventHandle){    
      var queue = [],
          style = window.getComputedStyle(this, null),
          computedProps = style.getPropertyValue('transition-property').split(', '),
          computedDurations = style.getPropertyValue('transition-duration').split(', '),
          $node = $(this);          

      // only count properties with duration higher than 0s
      for(var i = 0; i < computedDurations.length; i++)
        if(computedDurations[i] !== '0s')
          queue.push(computedProps[i]);           

      // there are transitions
      if(queue.length > 0){
        $node.on('webkitTransitionEnd.x transitionend.x', function(e){          
          queue.splice(queue.indexOf(e.originalEvent.propertyName));          
          if(queue.length < 1)
            $node.trigger('transitionsComplete');
        });

      // no transitions, fire (almost) immediately
      }else{
        setTimeout(function(){
          $node.trigger('transitionsComplete');
        }, 5);

      }

    },

    teardown: function(namespaces){
      $(this).off('.x');
    }

  };
})(jQuery);

我做了一个活生生的例子here http://jsfiddle.net/nf8gvbuo/.

唯一的问题是，它仅在元素本身具有转换属性时才有效，忽略子元素的转换。如果我切换transitionsComplete to transitionend父事件处理程序和子事件处理程序都在子转换完成后运行。有没有某种方法，或者更好的方法来确定一个元素或其子元素是否发生转换？如果可能的话，我想避免手动检查子项并检查它们的转换属性。 （无论如何，这都不可靠，因为即使有些孩子有过渡，也不意味着他们在那个时候会很活跃）

我用过树行者 API https://developer.mozilla.org/en/docs/Web/API/TreeWalker遍历原始节点（根）和所有子节点（仅限元素），过滤掉没有过渡的元素，并收集过渡属性queue (fiddle http://jsfiddle.net/7q8psw14/13/）。正如你所看到的，我已经解决了之间的时差complete-div and complete-p，他们现在（几乎 - 几毫秒）同时开火。

有两个警告，我没有解决方法：

1. 如果存在通过不同方式触发的转换，对于 示例一是通过添加触发的.visible to the div，以及 其他通过添加.invisible，它们都会被添加到queue。该事件永远不会触发，因为queue永远不会空 - 我不知道如何解决这个问题。
2. 如果存在快捷方式属性的转换（padding为了 示例），多个transitionend事件可能会被触发，transition-property， 例如padding-top, padding-right等等...这个 将导致数组很快变空splice(-1, 1)从数组末尾删除项目。我曾有一个解决方法 http://jsfiddle.net/7q8psw14/11/， 但 这可能会导致问题，因为它可能会删除queue。最好的解决方法是不要通过快捷方式进行转换 特性。

TreeWalker 的代码基于 Ban Nadel 的 -使用 TreeWalker 在 DOM 中查找 HTML 注释节点 http://www.bennadel.com/blog/2607-finding-html-comment-nodes-in-the-dom-using-treewalker.htm.

最后是代码：

(function ($) {

    $.event.special.transitionsComplete = {

        setup: function (data, namespaces, eventHandle) {
            var TRANSITION_PROPERTY = 'transition-property';
            var TRANSITION_DURATION = 'transition-duration';

            var root = this;
            var queue = [];
            var $node = $(this);

            function filter(node) { // filter for treeWalker
                /*** filters transitions which are a string with one '0s'. If more then '0s' is defined it will be catched when creating the queue ***/
                var computedDuration = window.getComputedStyle(node, null)
                    .getPropertyValue(TRANSITION_DURATION);

                return computedDuration === '0s' ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
            }

            filter.acceptNode = filter; // for webkit and firefox

            /** create the treeWalker to traverse only elements **/
            var treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, filter, false);

            /** traverse all elements using treeWalker.nextNode(). First node is the root **/
            do {
                var style = window.getComputedStyle(treeWalker.currentNode, null);
                var computedProps = style.getPropertyValue(TRANSITION_PROPERTY).split(', ');
                var computedDurations = style.getPropertyValue(TRANSITION_DURATION).split(', ');

                /** push all props with duration which is not 0s **/
                computedDurations.forEach(function (duration, index) {
                    duration !== '0s' && queue.push(computedProps[index]);
                });
            } while (treeWalker.nextNode()); // iterate until no next node

            // no transitions, fire (almost) immediately
            if (queue.length === 0) {

                setTimeout(function () {
                    $node.trigger('transitionsComplete');
                }, 5);

                return; // return out of the function to skip the transitions block
            }

            // there are transitions
            $node.on('webkitTransitionEnd.x transitionend.x', function (e) {
                var propertyName = e.originalEvent.propertyName;
                var indexOfProp = queue.indexOf(propertyName);

                queue.splice(indexOfProp, 1);

                if (queue.length < 1) {
                    console.log('Transitions Complete');
                    $node.trigger('transitionsComplete');
                }
            });

        },

        teardown: function (namespaces) {
            $(this).off('.x');
        }

    };
})(jQuery);