Heim > Artikel > Web-Frontend > CSS-Transformation transformieren
CSS-Transformation transformieren
- 高洛峰Original
- 2016-11-17 14:11:231253Durchsuche
Ü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('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}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 = 'translate(0,'+ count +'px)'
addEnd(this,function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
})
}
function addEnd(obj,fn) {
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
</html>