Question

根据mdn transitionend doc，如果删除transition属性或者当元素（或其中一个父元素）变为显示时，将不会触发css转换的transitionend事件：none

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

你有什么想法吗？

祝你好运

Answer 1

我尝试对它进行一些研究，除了transitionend之外，确实没有其他转换事件，但我发现this pen试图使用{transitionstart事件来模拟transitionend事件{1}}在很短暂的延迟后触发的事件。

基于这种技术，我试图模仿一个transitioncancel事件并得到一些＆＃34;不坏＆＃34;结果。这是一个小演示的代码（后面有解释）：

<强> 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;
}

<强>解释

基本上这样做是为了在模拟setTimeout之后开始transitionstart调用，持续时间设置为transition-duration（在{{中标准化为毫秒） 1}}功能）。
当传递给resolveDuration的函数执行时，表示转换已取消。
当另一个setTimeout事件被发出而不是transitionend属性（用于伪造opacity）时，transitionstart调用将被取消这样就不会发出假的setTimeout。

此解决方案的问题

需要另一个转换后的属性（在本例中为transitioncancel）来伪造opacity。
只能处理一个过渡属性。
假transitionstart仅在transitioncancel之后触发，而不是在转换取消时立即触发。

查看this fiddle以获取此演示。

有没有办法检测到css转换已中止/中断？

1 个答案: