Compatibility transition transition process

transition Compatibility:

Js a package to verify that the browser is compatible transition, and select a compatible wording

The following is transition.js

(function(){
    //判断transition属性是否存在
    //存在：空字符串
    //不存在：undefined
    //console.log(document.body.style.transition);
    var transitionName={
        transition:"transitionend",
        mozTransition:"transitionend",
        webkitTransition:"webkitTransitionEnd",
        oTransition:"oTransitionEnd otransitionend"
    };

    var transitionEnd="";
    var isSupport=false;

    for(var name in transitionName) {
         IF ! (document.body.style [name] = "undefined" ) {
             // indicating the presence 
            transitionend = transitionName [name]; 
            isSupport = to true ;
             BREAK ; 
        } 
    } 
    // local variable as a global variable properties 
    window.mt window.mt || = {}; // if there continues to exist, there is not a null object is created 
    window.mt.transition = transitionend; 
    window.mt.isSupport = isSupport; 

}) ();

Instructions:

Introduced in the transition.js page

window.mt.transition determine browser supports transition wording

window.mt.isSupport determine whether the browser supports transition

(Window.mt is arbitrarily named a global variable, with the name you how)

<!DOCTYPE html>
<html lang="zh-CN"><!-- 设置简体中文 -->
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <script src="js/jquery.js"></script>
    <script src="js/transition.js"></script>
    <script>
        console.log(window.mt.transition);//transitionend
        console.log(window.mt.isSupport);//true
    </script>
</body>
</html>

Compatibility transition transition process

Guess you like