CSS 변환 변환 속성에 대한 자세한 소개-CSS 튜토리얼-php.cn

CSS 변환 변환 속성에 대한 자세한 소개

高洛峰

풀어 주다： 2017-03-20 16:28:32

원래의

1888명이 탐색했습니다.

transition: Transition 속성

transition-property는 설정을 위한 CSS 속성을 지정합니다. 전환 효과 이름은 기본적으로 작성할 수 있습니다. all
transition-duration은 전환 효과를 완료하는 데 걸리는 초 또는 밀리초를 지정합니다.
전환 타이밍 기능: 기본 용이성전환 지연: 지연 시간

용이성 : 점진적으로 감속
선형: 일정한 속도
ease-in: 가속
ease -out: 감속
ease-in-out: 먼저 가속한 다음 감속
cubic-bezier: 베지어 곡선

전환 종료: 초과 완료이벤트

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);
}

로그인 후 복사

注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件
　　2注意重复触发transitionend事件。比如下面重复改变p的y轴位置

로그인 후 복사

<!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>

로그인 후 복사

CSS 변환 변환 속성에 대한 자세한 소개