Quando HTML5 e CSS3 se tornaram gradualmente mainstream, estou muito acostumado a usar JS para fazer algumas animações simples. Porque nos navegadores da área de trabalho, nem todos suportam CSS3. Os usuários também são muito estranhos. Nem todo usuário pode ser cultivado. Sempre há muitas pessoas que pensam que o win7.win8 não é tão útil quanto o XP. Mas o telefone celular é muito diferente e o navegador móvel suporta HTML5 e CSS3 muito bem. No entanto, a capacidade de processamento de hardware dos telefones celulares é muito limitada. Hoje, quando os telefones celulares quad-core e octa-core são galopantes, ainda existem pessoas que usam telefones celulares de núcleo duplo ou único como eu. Embora o JS seja bom, não tenho muito contato com você, então não posso ajustar esse sentimento bem. Um deslizamento de página simples funciona muito bem no PC i7, mas está preso, gaguejado, gaguejado, gaguejado e gaguejado no meu telefone de núcleo duplo. É muito deprimente. Por esse motivo, também procurei muito tempo e li muito. Finalmente, antes de se estabelecer, encontrei um método relativamente simples: use o CSS3 para executar animações.
No passado, além das funções de animação de JQuery, como animação, settimeout e setInterval, foram usadas para fazer um loop para alterar a margem, a largura, a parte superior e outras propriedades de um elemento. É precisamente isso que me deixa confuso.
Primeiro de tudo, o setTimeout, o setInterval não pode ser executado o tempo todo, definindo 0ms. Certa vez, descobri acidentalmente esse segredo enquanto depurava em um Iscroll. Acontece que o cálculo do atraso do timer depende do relógio interno do navegador e a precisão do relógio depende da frequência das atualizações do relógio. O intervalo de atualização entre o IE8 e suas versões anteriores do IE foi de 15,6 milissegundos. Acabou, acho que executa o deslocamento de 1px em 10ms e não pode fazer isso no prazo.
E o que está acontecendo com o cartão? Cartão, porque o código não está bem escrito. Afinal, o JS é um único thread e, uma vez que há ações demoradas, a interface do usuário pode não responder. Embora tenhamos usado o setTimeout, é precisamente porque o Settimeout que nos faz parecer que a interface não está morta, mas a ação não é suave. Porque após a execução do Settimeout desta vez, antes da próxima execução, outra ação demorada pode ser encontrada no intervalo médio, portanto a execução do setTimeout será ilimitada. Então o quê? Cartão! No entanto, há outra razão pela qual o cartão pode acionar acidentalmente o layout do navegador (ou seja: retransmissão) ao alterar o atributo original. Esta pergunta é demorada, mas é demorado. É demorado, mas muitas vezes pode ser ignorado. Mas muitas vezes não pode ser ignorado.
Além dos dois parágrafos acima, há outro problema, ou seja, em muitos telefones celulares, sempre parece que é quadro a quadro e também pode ser de quadro a quadro por quadro longo e curto. Este é um ritmo que pode arruinar todos. Por que isso está acontecendo? Ainda tem algo a ver com o atraso do setTimeout. Descarte quadros. Esse problema envolve a frequência de atualização do monitor. É realmente muito complicado.
Finalmente, o CSS3 foi selecionado, o JS alterou dinamicamente os atributos do elemento e a transição foi usada para controlar o tempo de execução da animação. Por exemplo:
A cópia do código é a seguinte:
<div id = "teste" style = "transição: todos os 1s facilitam; largura: 100px;" >/div>
JS:
A cópia do código é a seguinte:
$ ("#teste"). Width (200);
Dessa forma, após 1 segundo, a largura desta div se tornará 200px. Não é como se Sun Wukong se tornasse maior em um instante, e ele lentamente apressa os pés sem ficar preso ou parando. E há uma vantagem em usar a animação CSS, ela não é afetada pelo JS demorado. Embora os threads da interface do usuário e os threads JS sejam mutuamente exclusivos nos navegadores, isso não é válido para animações CSS, e muitos navegadores também podem permitir a aceleração de hardware (como o Chrome). Embora o re-agregado do navegador não seja muito óbvio em situações comuns, o re-agregado em larga escala deve ser evitado. Portanto, adicione -webkit -transform: translatez (0); ou -webkit -transform: tradutor3d (0,0,0); para que o navegador torne essa camada de forma independente. Mesmo que o re-agregado seja inevitável, a área é menor. É de fato uma decisão muito sábia de usar a tradução para substituir a margem.
Finalmente, algumas mudanças comuns desencadearão propriedades do retransmissão:
A cópia do código é a seguinte:
largura
altura
preenchimento
margem
mostrar
largura de fronteira
fronteira
altura da minia
O exposto acima é todo o conteúdo descrito neste artigo. Espero que seja útil para todos aprenderem JavaScript e CSS3. Ao mesmo tempo, adicione algumas deficiências e entenda.