Ich verstehe also, wie man sowohl CSS3-Übergänge als auch Animationen durchführt. Was nicht klar ist und ich gegoogelt habe, ist, wann ich welche verwenden soll.
Wenn ich zum Beispiel einen Ball zum Abprallen bringen möchte, ist klar, dass Animation der richtige Weg ist. Ich könnte Keyframes bereitstellen und der Browser würde die Zwischenframes erstellen und ich werde eine schöne Animation haben.
Es gibt jedoch Fälle, in denen ein solcher Effekt in beiden Fällen erzielt werden kann. Ein einfaches und allgemeines Beispiel wäre die Implementierung des Schiebeschubladenmenüs im Facebook-Stil:
Dieser Effekt kann durch Übergänge wie folgt erreicht werden:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}
Oder durch Animationen wie diese:
.sf-page {
-webkit-animation-duration: .4s;
-webkit-transition-timing-function: ease-out;
}
.sf-page.in {
-webkit-animation-name: sf-slidein;
-webkit-transform: translate3d(0, 0, 0);
}
.sf-page.out {
-webkit-animation-name: sf-slideout;
-webkit-transform: translateX(240px);
}
@-webkit-keyframes sf-slideout {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(240px, 0, 0); }
}
@-webkit-keyframes sf-slidein {
from { -webkit-transform: translate3d(240px, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}
Mit HTML sieht das so aus:
<div class="sf-container">
<div class="sf-page in" id="content-container">
<button type="button">Click Me</button>
</div>
<div class="sf-drawer">
</div>
</div>
Und dieses begleitende jQuery-Skript:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});
Was ich verstehen möchte, ist, was die Vor- und Nachteile dieser Ansätze sind.
- Ein offensichtlicher Unterschied ist, dass das Animieren viel mehr Code erfordert.
- Animation bietet bessere Flexibilität. Ich kann verschiedene Animationen zum Aus- und Einrutschen haben
- Gibt es etwas, was über Leistung gesagt werden kann? Nutzen beide die H / W-Beschleunigung?
- Welches ist moderner und der Weg in die Zukunft
- Könnten Sie noch etwas hinzufügen?
quelle
Ich werde die Definitionen für sich selbst sprechen lassen (laut Merriam-Webster):
Die Namen passen angemessen zu ihren Zwecken in CSS
In dem von Ihnen angegebenen Beispiel sollten also Übergänge verwendet werden, da es sich nur um einen Wechsel von einem Zustand in einen anderen handelt
quelle
Eine kürzere Antwort, direkt zum Punkt:
Überleitung:
Animation @keyframes:
Beide verwenden die CPU-Beschleunigung für einen viel gleichmäßigeren Effekt.
quelle
Die Animation benötigt viel mehr Code, es sei denn, Sie verwenden immer wieder denselben Übergang. In diesem Fall wäre eine Animation besser.
Sie können verschiedene Effekte zum Ein- und Ausschieben ohne Animation verwenden. Haben Sie nur einen anderen Übergang sowohl für die ursprüngliche Regel als auch für die geänderte Regel:
Animationen sind nur Abstraktionen von Übergängen. Wenn der Übergang also hardwarebeschleunigt ist, wird die Animation ausgeführt. Es macht keinen Unterschied.
Beide sind sehr modern.
Meine Faustregel lautet: Wenn ich denselben Übergang dreimal verwende, sollte es sich wahrscheinlich um eine Animation handeln. Dies ist in Zukunft einfacher zu warten und zu ändern. Wenn Sie es jedoch nur einmal verwenden, müssen Sie mehr tippen, um die Animation zu erstellen, und es lohnt sich möglicherweise nicht.
quelle
Animationen sind genau das - ein reibungsloses Verhalten von Eigenschaften. Mit anderen Worten, es gibt an, was mit den Eigenschaften eines Elements geschehen soll. Sie definieren eine Animation und beschreiben, wie sich diese Eigenschaften während des Animationsprozesses verhalten sollen.
Übergänge auf der anderen Seite geben an, wie eine Eigenschaft (oder Eigenschaften) ihre Änderung durchführen soll. Jede Änderung. Das Festlegen eines neuen Werts für bestimmte Eigenschaften, sei es mit JavaScript oder CSS, ist immer ein Übergang, aber standardmäßig nicht reibungslos. Durch Festlegen
transition
des CSS-Stils definieren Sie eine andere (reibungslose) Art und Weise, diese Änderungen durchzuführen.Es kann gesagt werden , dass Übergänge eine Standard definieren Animation , die jedes Mal , wenn die angegebene Eigenschaft geändert durchgeführt werden sollte.
quelle
In modernen Browsern tritt h / w Beschleunigung für die Eigenschaften
filter
,opacity
undtransform
. Dies gilt sowohl für CSS-Animationen als auch für CSS-Übergänge.quelle
quelle
Ich glaube , dass der Übergang von CSS3-Animation zu CSS3 Ihnen die gewünschte Antwort geben wird.
Grundsätzlich sind im Folgenden einige Imbissbuden aufgeführt:
quelle
Mach dir keine Sorgen, was besser ist. Wenn Sie Ihr Problem mit nur ein oder zwei Codezeilen lösen können, tun Sie dies einfach, anstatt eine Reihe von Codes zu schreiben, die zu einem ähnlichen Verhalten führen. Wie auch immer, der Übergang ist wie eine Teilmenge der Animation. Es bedeutet einfach, dass der Übergang bestimmte Probleme lösen kann, während die Animation andererseits alle Probleme lösen kann. Mit der Animation können Sie jede Phase von 0% bis 100% steuern, was beim Übergang nicht wirklich möglich ist. Für die Animation müssen Sie eine Reihe von Codes schreiben, während beim Übergang eine oder zwei Codezeilen verwendet werden, um das gleiche Ergebnis zu erzielen, je nachdem, woran Sie arbeiten. Aus der Sicht von JavaScript ist es am besten, den Übergang zu verwenden. Alles, was nur zwei Phasen umfasst, dh Start und Ende, verwendet den Übergang. Zusammenfassung, wenn es stressig ist, nicht '
quelle