CSS 변환 변환-CSS 튜토리얼-php.cn

CSS 변환 변환

高洛峰

풀어 주다： 2016-11-17 14:11:23

원래의

1225명이 탐색했습니다.

transition: 전환 속성

transition-property는 전환 효과를 설정하는 CSS 속성의 이름을 지정합니다. 기본적으로

transition-duration은 몇 초 또는 몇 초를 지정하는지 지정할 수 있습니다. 전환 효과를 완료하는 데 걸리는 시간(밀리초)

transition-timing-function: 기본 easytransition-delay: 지연 시간

ease: 점차적으로 느려짐

linear: 일정한 속도

ease-in: 가속

ease-out: 감속

ease-in-out: 먼저 가속한 다음 감속

cubic-bezier: 베지어 곡선

Transitionend : 오버완료 이벤트

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. 트랜지션에서 여러개 작성시 스타일을 한번 변경하지 않으면 이벤트가 한번 발생합니다. Transitionend 이벤트를 반복적으로 트리거하는 데 주의하세요. 예를 들어 다음은 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>

로그인 후 복사

CSS 변환 변환