Javascript 检测转换端的属性
我试图在同一元素具有不同延迟的多个转换的情况下检测转换完成的属性,如:Javascript 检测转换端的属性,javascript,jquery,css,css-transitions,Javascript,Jquery,Css,Css Transitions,我试图在同一元素具有不同延迟的多个转换的情况下检测转换完成的属性,如: var cstransitionend='WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd msTransitionEnd transitionend transitionend'; $('div').on(cstransitionend,函数(e){ var borderColorEnd,backgroundColorEnd; //检
var cstransitionend='WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd msTransitionEnd transitionend transitionend';
$('div').on(cstransitionend,函数(e){
var borderColorEnd,backgroundColorEnd;
//检测这是边界还是背景谁结束了?
如果(结束){
}
如果(背景色结束){
}
});代码>
div{
宽度:200px;
高度:200px;
背景色:红色;
边框:4px纯黄色;
过渡:边框颜色1s,背景颜色2s;
}
div:悬停{
边框颜色:绿色;
背景颜色:蓝色;
}
您可以使用事件附带的propertyName
属性来查找其转换
已结束的属性的名称
这个属性需要注意的一点是,它不会返回速记属性名。相反,它将为边框颜色
属性返回以下手写名称:
左边框颜色
右边框颜色
边框顶部颜色
边框底色
注意:出于某种原因,访问JS事件对象的propertyName
属性在Firefox上似乎不起作用(但在Chrome上起作用)。使用jQuery的事件对象而不是它似乎可以按预期工作。我们只能假设jQuery很好地解决了一些浏览器不一致的问题
var cstransitionend='WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd msTransitionEnd transitionend transitionend';
$('div').on(cstransitionend,函数(事件){
/*只是为了让输出变得明显:)*/
$('div').html($('div').html()+event.originalEvent.propertyName+'
);
});代码>
div{
宽度:200px;
高度:200px;
背景色:红色;
边框:4px纯黄色;
过渡:边框颜色1s,背景颜色2s;
}
div:悬停{
边框颜色:绿色;
背景颜色:蓝色;
}
看起来不错,只需在chrome和rok上测试,但不能在Firefox上测试哦抱歉@Pik_at,我目前无法在Firefox上测试,但我希望它能工作,因为我的参考来自MDN。让我看看我是否能找到任何信息。@Pik_at:我刚刚在一个旧的FF版本中进行了验证(并在聊天时与几个其他用户进行了检查),但它似乎不起作用。当我找到更多信息时,我会更新答案。@Pik_at:看起来浏览器与此不一致,通过jQuery的事件对象访问propertyName似乎有效。