溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用JavaScript檢測(cè)CSS轉(zhuǎn)換何時(shí)結(jié)束

發(fā)布時(shí)間：2021-11-20 14:08:36 來(lái)源：億速云 閱讀：160 作者：iii 欄目：編程語(yǔ)言

本篇內(nèi)容介紹了“怎么使用JavaScript檢測(cè)CSS轉(zhuǎn)換何時(shí)結(jié)束”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們可以使用JavaScript通過(guò)點(diǎn)擊“ transitionend”事件來(lái)檢測(cè)CSS轉(zhuǎn)換何時(shí)結(jié)束。像設(shè)置CSS3屬性一樣需要注意的是，一些舊版本的Chrome和Safari仍然依賴于事件的前綴版本。為了考慮所有可能的前綴，我們可以使用以下函數(shù)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>

}

在這種情況下 ， 事件對(duì)象填充了一些屬性，其中兩個(gè)更有用event.propertyName，它返回一個(gè)字符串，其中包含已轉(zhuǎn)換的CSS3屬性名稱列表，并event.elapsedTime返回轉(zhuǎn)換的持續(xù)時(shí)間（以秒為單位）。

“怎么使用JavaScript檢測(cè)CSS轉(zhuǎn)換何時(shí)結(jié)束”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手