四个基本的JavaScript函数来驯服CSS3过渡和动画(

发布时间:2025-08-31 20:17:22 作者:益华网络 来源:undefined 浏览量(0) 点赞(0)
摘要:3)检测转换何时结束 我们可以使用JavaScript通过点击“ transi

3)检测转换何时结束

我们可以使用JavaScript通过点击“  transitionend ”事件 来检测CSS转换何时结束 像设置CSS3属性一样需要注意的是,一些旧版本的Chrome和Safari仍然依赖于事件的前缀版本。 为了考虑所有可能的前缀,我们可以使用以下函数 transitionend 在浏览器中 返回支持的“  ”事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function gettransitionend(){<font></font>
var root = document.documentElement<font></font>
var transitions = {<font></font>
transition : transitionend ,<font></font>
OTransition : oTransitionEnd ,<font></font>
MozTransition : transitionend ,<font></font>
WebkitTransition : webkitTransitionEnd <font></font>
}<font></font>
<font></font>
for ( var t in transitions){<font></font>
if (root.style[t] !== undefined ){<font></font>
return transitions[t];<font></font>
}<font></font>
}<font></font>
return undefined<font></font>
}<font></font>
<font></font>
//Example Usage:<font></font>
var transitionendevt = gettransitionend()<font></font>
if (transitionendevt){ // if transitionend event supported by browser<font></font>
element.addEventListener(transitionendevt, function (e){<font></font>
// do something after end of transition<font></font>
}, false )<font></font>
}

在这种情况下  ,  事件对象 填充了一些属性,其中两个更有用 event.propertyName ,它返回一个字符串,其中包含已转换的CSS3属性名称列表,并 event.elapsedTime 返回转换的持续时间(以秒为单位)。

二维码

扫一扫,关注我们

声明:本文由【益华网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【益华网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,响应式网站,SEO优化,小程序开发,公众号系统,软件开发等

立即咨询 15368564009
在线客服
嘿,我来帮您!