Ho un CSS3 animation definito (e associato @keyframes):Esegue un'animazione CSS3 quando l'elemento genitore ha visibilità: nascosto?
animation: myAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
Anche se non si può vedere, è questa animazione in esecuzione (e consumando risorse) se l'elemento genitore ha visibility: hidden?
Sì, le animazioni continuano a essere eseguite anche se il contenitore padre ha visibility:hidden perché l'elemento è ancora lì ed è solo nascosto. Nel frammento di seguito è possibile verificare il contenuto di .output div per vedere che continua a funzionare e marginLeft continua a cambiare.
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>Secondo W3C Spec, modificando solo display: none termina un'animazione corrente (e possiamo prenderlo come non si avvia un'animazione anche).
L'impostazione della proprietà di visualizzazione su "nessuno" termina qualsiasi animazione in esecuzione applicata all'elemento e ai suoi discendenti. Se un elemento ha una visualizzazione di 'none', l'aggiornamento della visualizzazione su un valore diverso da 'none' avvierà tutte le animazioni applicate all'elemento dalla proprietà 'nome-animazione', nonché tutte le animazioni applicate ai discendenti con display diverso da 'nessuna'.
Come si può vedere nel frammento di seguito, l'animazione termina quando display è impostato su none e viene riavviato dal primo fotogramma chiave quando è arretrato a block.
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; Non interrompe l'animazione. Continuerà l'animazione semplicemente non viene visualizzata. Ma lo spazio ad esso assegnato sarà lì.
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>È possibile controllare qui barra di scorrimento è continuare a muoversi anche se visibility:hidden.
Avete provato esso? – Jeroen
Come potrei farlo? Prova a guardare il carico della CPU? visibilità: nascosta = non vedere nulla, visibilità: visibile = vedi animazione. – Kong
Utilizzare un profiler o generare 100 di tali animazioni e test w/e w/o hidding visibility, vedere se c'è una differenza. – Jeroen