有没有办法检测到css过渡已被中止/中断？

根据mdn transitionend doc，如果transition属性被移除，或者元素（或者其父元素之一）变为display：none，则不会触发css转换的transitionend事件。有没有办法检测到css过渡已被中止/中断？

我想知道是否有任何方法来检测这种情况从JavaScript方面（即：过渡已被中断）。据我所知，没有过渡中断事件或transitionaborted事件，但也许我错过了什么？

你有什么想法吗？

问候

来源

2015-09-11 Sam

我试图做一个关于它的小小的研究，真的有比transitionend没有其它的过渡事件，但我发现this pen它试图模仿使用transitionend事件，后触发transitionstart事件很短的延迟。

基于这种技术，我试图模拟一个transitioncancel事件，并得到了一些“不坏”的结果。这里是一个小的演示代码（解释说到后）：

HTML

<h1>Hello World</h1>

CSS

h1 { 
    margin-left: 0; 
    opacity: 0.99999; 
    transition: margin-left 1s ease, opacity 0.0001ms ease; 
} 

h1:hover { 
    opacity: 1; 
    margin-left: 500px; 
}

的Javascript

var h1 = document.querySelector('h1'); 
var styles = getComputedStyle(h1); 
var duration = resolveDuration(styles.transitionProperty, 
    styles.transitionDuration); 

var timer = null; 
h1.addEventListener('transitionend', function(e) { 
    if (e.propertyName === 'opacity') { 
     timer = setTimeout(function() { 
      console.log('transition cancelled!'); 
     }, duration); 
    } else { 
     clearTimeout(timer); 
    } 
}); 

function resolveDuration(property, duration) { 
    var properties = property.split(/,\s+/g); 
    var durations = duration.split(/,\s+/g); 
    for (var i = 0; i < properties.length; i++) { 
     if (properties[i] !== 'opacity') { 
      var unit = durations[i].replace(/\d+\.?\d*/, ''); 
      var value = parseInt(durations[i].replace(unit, '')); 
      if (unit === 's') { 
       return value * 1000; 
      } 
      return value; 
     } 
    } 
    return 0; 
}

说明

基本上这样做是仿真transitionstart后开始setTimeout呼叫，与设置为transition-duration持续时间（这是归到毫秒的resolveDuration功能）。
当传递给setTimeout的函数被执行时，这意味着转换被取消。
当另一个transitionend事件时发出这不是用于opacity属性（它用于假一transitionstart），则setTimeout呼叫被取消，使得假transitioncancel不发射。

问题与此解决方案

有（在这种情况下opacity）需要另一转移财产假冒transitionstart。
只能处理一个过渡属性。
假transitioncancel只在transition-duration之后被触发，而不是在转换被取消时立即触发。

查看this fiddle的演示。

来源

2015-09-11 15:49:50

有没有办法检测到css过渡已被中止/中断？

回答

相关问题