如何在没有浏览器嗅探的情况下支持transitionend
How to support transitionend without browser sniffing?
我有一些javascript触发一些样式更改,将导致CSS过渡。
我应该如何钩入一个将在转换完成后执行的回调。显然,在旧的浏览器中,它会立即转换,但它们也无法识别transitionend事件。
除了绑定不同的事件之外,最好的方法是什么?msie,,.browser美元。版本<= 9) -我知道这是不好的做法。
下面是一个简单的例子来说明我的观点:
HTML<div>test</div>
CSS div {
border: 1px solid black;
transition: width 2s;
width: 5px
}
.test {
width: 100px;
}
JS
$(function(){
$(document).on('transitionend', function(){
alert('transition complete');
});
$('div').addClass('test');
});
Live JS fiddle: http://jsfiddle.net/vsDrH/1/
让这个事件在旧浏览器中工作的最好方法是什么?
谢谢你的帮助
可以这样检查浏览器是否支持CSS属性:
http://jsfiddle.net/vsDrH/3/function isSupported(property) {
return property in document.body.style;
}
$(function(){
$(document).on('transitionend', function(){
alert('transition complete');
});
$('div').addClass('test');
if(!isSupported('transition')) {
$(document).trigger('transitionend');
}
});
您可以查看jQuery Transit的源代码。写得很好,而且不言自明。
原理很简单:
- 您获得转换属性的名称,用于嗅探浏览器的呈现引擎;
- 接下来我们有一个不同浏览器中所有事件名称的列表,从中你可以得到特定浏览器的事件名称
- 在其他情况下,如果不存在
transitionend
属性,您应该考虑实现setTimeout
定时器,以获得最佳的跨浏览器效率。
Javascript(直接来自:jQuery Transit源代码)
// Helper function to get the proper vendor property name.
// (`transition` => `WebkitTransition`)
// (1)
function getVendorPropertyName(prop) {
// Handle unprefixed versions (FF16+, for example)
if (prop in div.style) return prop;
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
if (prop in div.style) { return prop; }
for (var i=0; i<prefixes.length; ++i) {
var vendorProp = prefixes[i] + prop_;
if (vendorProp in div.style) { return vendorProp; }
}
}
// (2)
var eventNames = {
'transition': 'transitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'WebkitTransition': 'webkitTransitionEnd',
'msTransition': 'MSTransitionEnd'
};
var eventName = eventNames[getVendorPropertyName('transition')] || null
// (3)
if ( eventName ) {
// Use the 'transitionend' event if it's available.
bound = true;
element.bind(eventName, cb);
} else {
// Fallback to timers if the 'transitionend' event isn't supported.
window.setTimeout(cb, delay);
}
这样做,您将100%确定您的transitionEnd
事件将触发
相关文章:
- 如何在未直接触发的情况下停止事件
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 在不使用jquery的情况下查找页面中的所有锚点并附加函数
- 在不打开聊天屏幕的情况下制作Zopim-ding代理
- 在不阻止默认行为的情况下检测IE10中的缩放
- 如何在不传递此信息的情况下查找被调用的元素
- 如何在不刷新页面的情况下更新显示框
- 有没有一种方法可以在控制台关闭的情况下让console.log()在IE中记录消息
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 在不使用文件属性的情况下在javascript中查找图像的大小,因为它在eclipse中不受支持
- 如何在不修改脚本源的情况下在IE 8中支持window.addEventListener
- 如何在不支持模块的情况下使用ember.js
- 在不重新加载页面的情况下发布请求,并且不支持javascript(Node Express框架)
- 实现支持javascript的网站的技术,也可以在没有javascript的情况下运行
- 如何在没有浏览器嗅探的情况下支持transitionend
- 在没有 jQuery 支持的情况下更新 javascript 中的本地存储值
- 如何在没有winjs支持的情况下使用javascript开发UWP应用程序
- 如何在没有ActiveXObject的情况下使用Javascript/JQuery在文本文件中写入数据,因为它只支持IE
- Ruby on Rails - 如何在支持和不使用 JavaScript 支持的情况下测试方案
- 在合作伙伴网站上添加javascript,以便在不知道其FTP凭据的情况下提供客户聊天支持和销售跟踪