Ich habe ein CSS3 animation definiert (und die damit verbundenen @keyframes):Wird eine CSS3-Animation ausgeführt, wenn das übergeordnete Element sichtbar ist: ausgeblendet?
animation: myAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
Auch wenn Sie es nicht sehen können, ist diese Animation läuft (und Ressourcen verbrauch), wenn das übergeordnete Element visibility: hidden hat?
Ja, die Animationen werden auch dann ausgeführt, wenn der übergeordnete Container visibility:hidden hat, weil das Element immer noch vorhanden ist und nur ausgeblendet wird. Im folgenden Snippet können Sie den Inhalt von .output div überprüfen, um zu sehen, dass es weiterläuft und marginLeft sich ständig ändert.
window.onload = function() {
var animEl = document.querySelector('.animated');
var outputEl = document.querySelector('.output');
window.setTimeout(function() {
outputEl.textContent = 'Margin left when visibility becomes hidden: ' + window.getComputedStyle(animEl).marginLeft;
document.querySelector('.wrapper').style.visibility = 'hidden';
window.setTimeout(function() {
outputEl.textContent = 'Margin left when visibility becomes visible: ' + window.getComputedStyle(animEl).marginLeft;
document.querySelector('.wrapper').style.visibility = 'visible';
}, 1000);
}, 1000);
}.wrapper{
white-space: nowrap;
}
.wrapper > div {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid;
}
.animated {
animation: move 3s linear infinite;
}
@keyframes move {
to {
margin-left: 300px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
<div class='animated'></div>
<div class='sibling'></div>
</div>
<div class='output'></div>Per W3C Spec, nur display: none Einstellung beendet eine laufende Animation (und das können wir annehmen, wie auch keine Animation starten).
Wenn Sie die Eigenschaft display auf 'none' setzen, wird jede laufende Animation beendet, die auf das Element und seine Nachkommen angewendet wird. Wenn ein Element die Anzeige 'none' enthält, werden bei der Aktualisierung der Anzeige auf einen anderen Wert als 'none' alle Animationen, die auf das Element angewendet werden, mit der Eigenschaft 'animation-name' sowie alle Animationen auf Nachkommen mit anderer Darstellung als 'keiner'.
Wie Sie im folgenden Schnipsel sehen können, wird die Animation beendet, wenn display-none gesetzt und von erster Keyframe neu gestartet wird, wenn er wieder auf block gesetzt.
window.onload = function() {
var animEl = document.querySelector('.animated');
var outputEl = document.querySelector('.output');
window.setTimeout(function() {
outputEl.textContent = 'Margin left when display becomes none: ' + window.getComputedStyle(animEl).marginLeft;
document.querySelector('.wrapper').style.display = 'none';
window.setTimeout(function() {
outputEl.textContent = 'Margin left when display becomes block: ' + window.getComputedStyle(animEl).marginLeft;
document.querySelector('.wrapper').style.display = 'block';
}, 1000);
}, 1000);
}.wrapper {
white-space: nowrap;
}
.wrapper > div {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid;
}
.animated {
animation: move 3s linear infinite;
}
@keyframes move {
to {
margin-left: 300px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
<div class='animated'></div>
<div class='sibling'></div>
</div>
<div class='output'></div>visibility: hidden; Stoppt die Animation nicht. Es wird fortgesetzt Animation wird Ihnen nicht angezeigt. Aber der zugewiesene Platz wird da sein.
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
margin-left:100%;
visibility: hidden;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>Sie können hier überprüfen Scrollbar, auch wenn visibility:hidden bewegt halten.
Haben Sie es getestet? – Jeroen
Wie würde ich das tun? Versuchen Sie es mit der CPU-Last? Sichtbarkeit: Versteckt = nichts sehen, Sichtbarkeit: sichtbar = siehe Animation. – Kong
Verwenden Sie einen Profiler, oder generieren Sie 100 solcher Animationen und testen Sie die Sichtbarkeit ohne Sichtbarkeit, sehen Sie, ob es einen Unterschied gibt. – Jeroen