Question

我有一个HTML元素，我附加了一个webkitTransitionEnd事件。

function transEnd(event) {
    alert( "Finished transition!" );

}

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

然后我继续更改其CSS左侧和顶部属性，如：

node.style.left = '400px';
node.style.top = '400px';

这会使DIV平稳地移动到新位置。但是，当它完成时，会出现2个警告框，而我期待动画结束时只有一个。当我改变CSS left属性时，我得到一个警告框 - 这意味着对样式的两个更改被注册为两个单独的事件。我想将它们指定为一个事件，我该怎么做？

我无法使用CSS类同时应用这两种样式，因为左侧和顶部CSS属性是我在运行时才知道的变量。

Answer 1

检查propertyName事件：

function transEnd(event) {
    if (event.propertyName === "left") {
        alert( "Finished transition!" );
    }
}

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

这样，它只会在“left”属性结束时触发。如果两个属性都设置为相同的持续时间和延迟，这可能会最有效。此外，如果您只更改“左”或两者，这将有效，但如果仅更改“顶部”，则不。

或者，您可以使用一些计时器技巧：

var transEnd = function anon(event) {
    if (!anon.delay) {
        anon.delay = true;

        clearTimeout(anon.timer);
        anon.timer = setTimeout(function () {
            anon.delay = false;
        }, 100);

        alert( "Finished transition!" );
    }
};

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

这应确保您的代码每100毫秒最多运行一次。您可以更改setTimeout延迟以满足您的需求。

Answer 2

删除活动：

var transEnd = function(event) {
   event.target.removeEventListener("webkitTransitionEnd",transEnd);
};

它将触发第一个属性，而不是其他属性。

Answer 3

如果你喜欢它在JQuery中，试试这个。请注意，有一个事件参数用于存储事件对象并在相应的函数中使用。

$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() { 
    alert(event.propertyName) 
});

Answer 4

从我的角度来看，代码的预期行为将是

仅在上次转换完成时触发警报
支持任何属性的转换
支持1,2，无缝转换

最近我一直在为CSS时间驱动的页面转换管理器做类似的工作。

这是一个想法

// Returs the computed value of a CSS property on a DOM element
// el: DOM element
// styleName: CSS property name
function getStyleValue(el, styleName) {
    // Not cross browser!
    return window.getComputedStyle(el, null).getPropertyValue(styleName);    
}

// The DOM element
var el = document.getElementById('el');

// Applies the transition
el.className = 'transition';

// Retrieves the number of transitions applied to the element
var transitionProperties = getStyleValue(el, '-webkit-transition-property');
var transitionCount = transitionProperties.split(',').length;

// Listener for the transitionEnd event
function eventListener(e) {
    if (--transitionCount === 0) {
        alert('Transition ended!');
        el.removeEventListener('webkitTransitionEnd', eventListener);
    }
}

el.addEventListener('webkitTransitionEnd', eventListener, false);

您可以在此处this implementation或（更简单）jQuery version进行测试，两者均仅适用于Webkit

Answer 5

如果您使用的是webkit，我假设您正在动员一个Web应用程序来进行跨平台访问。

如果是这样，您是否考虑过在Web应用程序表示层抽象跨平台访问？

Webkit不提供移动设备上的原生外观，但这是新技术可以提供帮助的地方。

Webkit transitionEnd事件分组

5 个答案: