css transform transform-CSS Tutorial-php.cn

css transform transform

高洛峰

Release： 2016-11-17 14:11:23

Original

1226 people have browsed it

transition: transition property

transition-property specifies the name of the css attribute that sets the transition effect. The default can be written as all

transition-duration specifies how many seconds or milliseconds it takes to complete the transition effect

transition-timing-function: default easetransition-delay : Delay time

ease: Gradually slow down

linear: Uniform speed

ease-in: Accelerate

ease-out: Decelerate

ease-in-out: Accelerate first and then decelerate

cubic-bezier: Bezier Er curve

transitionend: over completion event

function addEnd(obj,fn){
    obj.addEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
    obj.addEventListener(&#39;transitionend&#39;,fn,false);
}
function removeEnd(obj,fn){
    obj.removeEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
    obj.removeEventListener(&#39;transitionend&#39;,fn,false);
}

Copy after login

Note: 1. In the transition, if you write more than one, the event will be triggered once without changing the style
　 2. Pay attention to triggering the transitionend event repeatedly. For example, the following repeatedly changes the y-axis position of the div

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
    </style>
</head>
<body>
<div id="nav"></div>
<script>
    var oHome=document.getElementById("nav");
    var count = 10;
    oHome.onclick = function(){
        count += 20;
        oHome.style.transform = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        addEnd(this,function(){
            count += 20;
            oHome.style.transform = &#39;translate(0,&#39;+ count +&#39;px)&#39;
        })
    }
    function addEnd(obj,fn) {
        obj.addEventListener(&#39;WebkitTransitionEnd&#39;,fn,false);
        obj.addEventListener(&#39;transitionend&#39;,fn,false);
    }
</script>
</body>
</html>

Copy after login

css transform transform