Bem vindo de volta.
Então, quando eu inicialmente introduzi Jay queery, mencionei que isso nos ajuda a fazer coisas como
elementos seletos manipulá-los em ouvintes de eventos.
E também mencionei que isso ajuda com efeitos e animações.
Então, neste vídeo, vou fazer uma prévia rápida de alguns dos efeitos criados,
em particular, eu vou mostrar duas grandes categorias de efeitos de desvanecimento e slides.
Então eu estou no Jay Corey doca aqui na categoria de efeitos.
efeitos e vou começar mostrando os efeitos de desvanecimento, então eu vou olhar para desaparecer para começar.
Você pode ver que existem alguns métodos que têm que ver com os
O que o fadeout faz é selecionar um elemento com um sinal de dólar ou um conjunto
de elementos e você chamar isso desaparecendo e ele irá animar esse elemento da opacidade total para a transparência total
ou opacidade zero.
Então, basicamente, desvanece um elemento e você pode fornecer uma duração se desejar que ele seja lento ou rápido
ou muito lento.
Você pode fornecer vários milissegundos.
milissegundos e, em seguida, você pode fornecer um retorno de chamada para executar no final, que vou mostrar em apenas um momento.
O padrão é 400
Então, vou fazer um novo arquivo aqui para demonstrar essa demo de estudo de efeito e vou apenas copiar nossa estrutura
da última página de demonstração e essa irá chamar os efeitos de J Querrey.
Então, nós temos isso configurado e eu vou me livrar de todo este conteúdo
aqui e então vou adicionar algumas divs.
Vamos fazer três divs e vamos usar esses divs e desaparecer e animá-los e deslize-os para cima
e para baixo.
dar-lhes algum conteúdo dentro deste primeiro será que estes não me desvanecem no próximo.
E então vou
Estou implorando por favor.
E, por fim, teremos um que diz ajuda ajudar.
Então, essas divs estão desesperadas para não serem desaparecidas.
Infelizmente, hoje não é o dia da sua sorte.
E nós vamos lutar contra eles.
Então, para tornar isso mais claro, vou adicionar algum estilo aqui às nossas vidas para que eles tenham uma
cor que podemos ver desaparecer.
E eles também têm uma largura e altura que podemos ver deslizar para cima e para baixo.
Então, vou selecionar todos os divs e dar-lhes um total de 100 pixels e uma altura de
100 pixels e um fundo colorido de teal e vamos salvar e vamos abrir isso.
Nós temos três divs.
No entanto, eu gostaria que eles estivessem na mesma linha.
Então, uma maneira de fazer isso é com o flutuador deixado.
Agora eles estão todos na mesma linha, mas eles sangraram um no outro.
Então, para corrigir que podemos adicionar uma margem.
Então, vamos fazer uma margem de 20 pixels em todos os lados.
Agora, acabamos com três quadrados e cada um tem algum texto para dentro e nós realmente não precisamos ir ao
lado da borda, porque eles tudo o que vamos fazer são demonstrar como podemos encaixá-los dentro e fora.
Então, vamos adicionar um botão no topo aqui e este botão só vai me clicar.
E quando clicamos neste botão, o que acontecerá é que nossas animações serão executadas.
Então eu clico neste e esses três itens devem desaparecer para começar.
Então, para reiterar, o desvanecimento tomará um elemento da opacidade total ou qualquer opacidade que esteja atualmente
e desapareceu até o ponto de transparência total.
Então, parece que este é um fadeout de ponto selecionado e podemos fornecer uma seqüência de velocidade opcional tão
lenta ou rápida ou podemos dar uma série de milissegundos.
Então, deixe-me mostrar isso agora.
Na verdade, vou fazer isso em um arquivo separado, então vou fazer um arquivo javascript e salvar.
Eu vou chamar isso afeta apenas o gênio salvo salvo que
meu alerta foi conectado e ligou isso corretamente no fundo.
Basta adicionar uma tag de script.
A fonte é igual a efeitos.
Sim.
E se atualizarmos, recebemos nosso alerta conectado.
Então, o que queremos fazer aqui é o Faid, estas divide-se.
Portanto, precisamos selecionar o dispositivo assim e não desaparecer.
E então podemos fornecer uma velocidade ou simplesmente deixá-lo assim.
E se isso é tudo o que queremos fazer ou atualizar e você pode ver enquanto a página carrega eles começam a desaparecer.
Então vamos fazer isso acontecer quando clicamos no botão.
ponto de sinal de dólar e podemos fazer clique ou eu vou fazer um ponto rápido e depois passar na nossa função de retorno de chamada.
Então, vamos querer fazer um
Então, quando clicarmos, desapareceremos todos os divs assim e agora vamos atualizar e, se eu clicar, você
pode ver todos eles desaparecerem.
Então, como mencionei, podemos fornecer um número aqui, algo como 1000, que é um segundo completo.
E se eu atualizar, você verá quando eu clicar, ele demora um segundo para que eles desapareçam.
Um ponto importante sobre o fadeout é que, se eu inspecionar a página aqui e eu olho para os elementos, os
divs ainda estão na equipe, ainda no dormitório.
Nós simplesmente não os vemos porque sua exibição foi configurada para nenhum.
Portanto, não os exclui ou não os remove da página.
Está apenas escondendo-os.
E essa é definitivamente uma distinção importante.
Então, digamos que eu queria apenas imprimir uma mensagem uma vez que as divs se apagaram,
então eu as desvaneceria e depois faria algo como esse desvanecer-se concluído quando cancelou o log.
E se eu correr isso, vou abrir o console e observar a ordem em que as coisas acontecem.
Então, quando eu clicar aqui, Faid concluiu o caminho antes que o desvanecimento seja feito.
Então, o que acontece aqui é que selecionamos todas as divs e começamos a desaparecer, mas leva um segundo completo.
E javascript não espera que esse segundo final termine antes de passar para a próxima linha.
Ele imediatamente se mudou para esta linha e imprime o Faid concluído e, em seguida, o desvanecimento termina.
Então, se queremos que o código aconteça logo após o desmame terminar, queremos que ele seja garantido depois
que podemos passar em um retorno de chamada aqui.
E então, este retorno de chamada será chamado dentro do fadeout automaticamente quando estiver pronto.
Então vou mudar nosso registro constante lá e salvar.
E se eu atualizar e agora eu clique no fim desaparecer e, em seguida, obtemos 3 registros de ponto de console
completos Fade para cada um desses.
Um cenário mais comum em vez de apenas imprimir uma string no Cônsul é realmente remover
os elementos assim que desaparecermos.
Então eu mencionei que eles estão escondidos, na verdade não foram embora.
E se quisermos excluí-los como na nossa lista de tarefas, vamos construir quando clicarmos no lixo
ao lado de um item que queremos que ele desapareça lentamente, faça uma boa animação.
Mas, em seguida, simplesmente exclua a página inteiramente do DOM.
Então, precisamos usar um método chamado remover e só queremos removê-lo depois que o fadeout estiver concluído.
Então, isso parece que isso apenas irá remover isso.
E o que isso vai fazer é esperar até que o fadeout seja concluído.
E para cada div, ele executará o método Remove nela.
Então, atualize e clique em clicar em mim.
Eles desaparecem e então, se passarmos aos elementos, você pode ver que nosso corpo só tem um botão
agora e uma etiqueta todas as divs estão completamente desaparecidas.
E se eu comentar essa linha e atualizar, você pode ver onde eles começam aqui três divs e
eu clico no botão e tudo isso acontece.
Eles desaparecem e depois a exibição é definida como nenhuma.
Então, se eu colocar o meu código no lugar errado e eu executei o método Remove aqui, fiz todos os divs
dot remover exatamente assim.
O que realmente aconteceria é que o pedido não está garantido.
E isso vai demorar um segundo.
E este código não aguardará que o segundo termine.
Então, ele começará a desaparecer e depois será removido imediatamente depois.
Então, isso acaba parecendo assim, que começa a desaparecer e imediatamente depois de removê-los.
Então, basicamente, não é desvanecimento.
Então, é por isso que J.
Corey fornece esse retorno de chamada porque é bastante comum para nós querermos fazer algo depois
que desaparecemos algo ou depois de deslizar algo para baixo ou seja qual for a animação.
Então, isso me leva ao meu próximo ponto, que é que eu quero mostrar algumas
das outras animações que podemos fazer para que possamos também desaparecer.
Então, se eu configurar a tela para não ser no começo desse jeito e eu atualizar.
Nós não vemos os divs, porque agora eles estão escondidos em vez de desvanecá-los quando
clicamos, podemos desvendá-los e funciona como você esperaria.
Clique no botão e eles desaparecem em um segundo e, em seguida, se quisermos executar algum código depois, quando sabemos que
eles acabaram de desaparecer, podemos colocar algum código e dizer se o retorno de chamada aqui.
Tudo bem, então Faden.
O GK fornece um método de desvanecimento mais agradável que é chamado de alternar Faid e o alternar Faid funciona da mesma maneira.
Proporciono uma série de milissegundos e saberá se precisa desvanecer algo dentro ou fora dependendo de se
está atualmente mostrando ou não.
Então, se eu atualizar e eu clicar no botão Desligar, ele começa alimentando-os todos e, em seguida,
desaparecendo todos e voltando.
É basicamente como adicionar uma classe à lista de aulas ou usar a classe toggle com Jay
Querrey, onde ele simplesmente decide se precisa desaparecer ou desaparecer.
Tudo bem, de modo que está desaparecendo o próximo conjunto de efeitos que eu quero demonstrar são esses efeitos deslizantes.
Então, aqui em baixo, temos um deslize para baixo, deslize o cursor e deslize para cima.
Então, vou começar com o deslize para baixo e o que ele faz é que ele leva um elemento que atualmente não está
apresentando em vez de animar a opacidade em um elemento como o Faid, ele realmente anima a altura de um elemento.
Então eu vou mostrar-lhe como isso funciona.
Nós estamos mudando isso.
Em vez de desaparecer, simplesmente deslizaremos.
E é porque quando atualizamos nossos elementos estão escondidos.
Então, se eu correr deslizar para baixo quando clicamos em um botão, você verá que a altura está animada e
a mesma coisa é para deslizar.
Faz o contrário.
Então, se eu me livrar da exibição para que eles estejam mostrando.
E agora eu clico no botão.
Sua altura é animada e eles deslizam para cima e depois exibem o conjunto para Nenhum no final.
E o outro método é slide toggle que funciona exatamente como o Faid alterna onde ele decide o que fazer.
Então, se eu clicar, eles deslizam para cima e agora deslizam para baixo e voltam para cima e para baixo.
Então, é tudo o que há para deslizar para cima deslize para baixo e deslize para baixo.
Eles eram como se fossem métodos analógicos da Faid.
Há também um retorno de chamada opcional que podemos transmitir.
Então, se darmos uma duração igual a 1 segundo e depois eu posso receber minha chamada de volta.
E eu vou fazer outro con. Esse log no slide final é feito.
E isso só será impresso uma vez que o segundo slide completo termine.
Então eu atualizo.
Vejamos o console e eles clicam em me clicar e você pode ver isso apenas impresso assim que o slide
foi feito.
Mesmo aqui, preste atenção aqui.
Isso mudará para seis.
Aqui vamos nós.
Mas, novamente, um padrão mais comum é remover os itens uma vez que os deslocamos ou desaparecemos
ou o que quer que fizemos é removê-los.
Então, aqui levará um segundo para deslize-os e depois eles serão removidos da página.
E se nós vamos para a guia de elementos, nosso corpo está vazio, exceto para esse botão e o script.
Então, espero que eles lhe dê uma boa idéia de como alguns dos efeitos em uma cantera funcionam.
Estes são, de longe, os desvanecimentos e deslizamentos mais comuns.
E nós vamos usá-los em vez de nosso aplicativo de lista de tarefas que vamos começar no próximo vídeo.