Ricerca…


Usa la trasformazione e l'opacità per evitare il layout del trigger

La modifica di alcuni attributi CSS fa sì che il browser calcoli in modo sincrono lo stile e il layout, il che è un aspetto negativo quando è necessario animare a 60 fps.

NON

Animazione con layout di trigger left e top .

#box {
  left: 0;
  top: 0;
  transition: left 0.5s, top 0.5s;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;
}

#box.active {
  left: 100px;
  top: 100px;
}

La demo ha preso 11.7ms per il rendering, 9.8ms per la pittura

NON

FARE

Animare con transform con la stessa animazione.

#box {
  left: 0;
  top: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;

  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

#box.active {
  transform: translate3d(100px, 100px, 0);
}

Demo stessa animazione, ha preso 1,3 ms per il rendering, 2,0 ms per la pittura.

FARE



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow