我想在用CSS转换完成动画后删除一个对象，但我不能使用JavaScript库。
如何检测动画何时完成？我是否以某种方式使用回调或自定义事件？
element.addEventListener('transitionend', function(event) {
alert("CSS Property completed: " + event.propertyName);
}, false );
目前，事件的确切名称尚未标准化。这是MDN的一句话：
转换完成时会触发一个事件
在所有符合标准的浏览器中，事件为transitionend，
在WebKit中它是CCD_ 2。
以下是Webkit的小提琴：http://jsfiddle.net/bNgWY/
由于我目前正在做完全相同的事情，我将分享Marakana教程中的一个有用的跨浏览器实现。
// First, we store the names of the event according to the browsers
var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];
//For each of them...
for (var i in navigatorsProperties) {
//We attach it to our overlay div
el.addEventListener(navigatorsProperties[i],function()
{
// Here's the code we want to fire at transition End
console.log('transition end');
},false);
}
需要注意的是，IE10支持transitionend的转换（请参阅MSDN）。
IE9及以下版本不支持转换（请参阅caniuse.com），因此您将无法将任何eventListener附加到转换端（因此不要尝试msTransitionend或其他适用于这些浏览器的方法）。
编辑：在阅读Github上的Modernizr文档时，我偶然发现了他们的跨浏览器polyfills页面。在许多其他有用的链接中，我发现了这个小但非常好的转换脚本。
请注意，Github README.md中的示例使用jQuery，但该库确实需要无库和不依赖项，因为它是用普通javascript编写的。
我找不到符合我要求的合适的"transitiononed"polyfill。因此，如果你想挂接过渡端一次，可以使用以下方法：
(function() {
var i,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'OTransition':'otransitionend', // oTransitionEnd in very old Opera
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
var transitionEnd = '';
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
transitionEnd = transitions[i];
break;
}
}
Object.prototype.onTransitionEndOnce = function(callback) {
if (transitionEnd === '') {
callback();
return this;
}
var transitionEndWrap = function(e) {
callback();
e.target.removeEventListener(e.type, transitionEndWrap);
};
this.addEventListener(transitionEnd, transitionEndWrap);
return this;
};
}());