Detaillierte Einführung in CSS-Transformationsattribute-CSS-Tutorial-php.cn

Detaillierte Einführung in CSS-Transformationsattribute

高洛峰

Freigeben： 2017-03-20 16:28:32

Original

1838 Leute haben es durchsucht

transition: Transition Attribut

transition-property gibt die CSS-Eigenschaft zum Festlegen der an Übergangseffekt Der Name kann standardmäßig geschrieben werden all
transition-duration gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist
Übergangs-Timing-Funktion: Standard-EaseTransition-Delay: Verzögerungszeit

Ease : allmählich verlangsamen
linear: konstante Geschwindigkeit
Einstieg: beschleunigen
Nachlassen -out: verlangsamen
ease-in-out: Zuerst beschleunigen und dann abbremsen
cubic-bezier: Bezier-Kurve

Transitionend: Übervollständigkeit des Ereignisses

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

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

Nach dem Login kopieren

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

Detaillierte Einführung in CSS-Transformationsattribute

Transformation: Verformung

Rotation: rotieren(): Grad
Skew: skew(): Degree

skewX
skewY

Skala: Skala(): positive Zahlen, negative Zahlen, Dezimalzahlen

SkalaX
scaleY

Displacement: Translate(): Alle von CSS unterstützten Einheiten können verwendet werden

translateX
translateY >

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS-Transformationsattribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!