CSS-Transformation transformieren-CSS-Tutorial-php.cn

CSS-Transformation transformieren

高洛峰

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

Original

1226 Leute haben es durchsucht

Übergang: Übergangseigenschaft

Übergangseigenschaft gibt den Namen des CSS-Attributs an, das den Übergangseffekt festlegt. Standardmäßig können Sie alle schreiben

Übergangsdauer gibt an, wie viele Sekunden oder Millisekunden, die benötigt werden, um den Übergangseffekt abzuschließen

transition-timing-function: Standard-Easetransition-delay: Verzögerungszeit

ease: allmählich verlangsamen

linear: konstante Geschwindigkeit

ease-in: beschleunigen

ease-out: verlangsamen

ease-in-out: zuerst beschleunigen und dann verlangsamen

cubic-bezier: Bézier-Kurve

Transitionend: Over-Completion-Ereignis

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

Nach dem Login kopieren

Hinweis: 1. Wenn Sie im Übergang mehrere Ereignisse schreiben, wird das Ereignis einmal ausgelöst, wenn der Stil nicht einmal geändert wird. 2. Bezahlen Achten Sie darauf, das Transitionend-Ereignis wiederholt auszulösen. Beispielsweise ändert Folgendes wiederholt die Y-Achsenposition des 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>

Nach dem Login kopieren

CSS-Transformation transformieren