1
00:00:00,330 --> 00:00:01,500
Bem vindo de volta.

2
00:00:01,500 --> 00:00:06,510
Então, quando eu inicialmente introduzi Jay queery, mencionei que isso nos ajuda a fazer coisas como

3
00:00:06,630 --> 00:00:08,820
elementos seletos manipulá-los em ouvintes de eventos.

4
00:00:08,930 --> 00:00:11,990
E também mencionei que isso ajuda com efeitos e animações.

5
00:00:12,180 --> 00:00:16,800
Então, neste vídeo, vou fazer uma prévia rápida de alguns dos efeitos criados,

6
00:00:16,800 --> 00:00:22,000
em particular, eu vou mostrar duas grandes categorias de efeitos de desvanecimento e slides.

7
00:00:22,250 --> 00:00:26,220
Então eu estou no Jay Corey doca aqui na categoria de efeitos.

8
00:00:26,280 --> 00:00:31,650
efeitos e vou começar mostrando os efeitos de desvanecimento, então eu vou olhar para desaparecer para começar.

9
00:00:31,650 --> 00:00:36,010
Você pode ver que existem alguns métodos que têm que ver com os

10
00:00:36,570 --> 00:00:41,900
O que o fadeout faz é selecionar um elemento com um sinal de dólar ou um conjunto

11
00:00:41,910 --> 00:00:48,480
de elementos e você chamar isso desaparecendo e ele irá animar esse elemento da opacidade total para a transparência total

12
00:00:48,480 --> 00:00:49,470
ou opacidade zero.

13
00:00:49,500 --> 00:00:56,130
Então, basicamente, desvanece um elemento e você pode fornecer uma duração se desejar que ele seja lento ou rápido

14
00:00:56,220 --> 00:00:57,380
ou muito lento.

15
00:00:57,510 --> 00:00:59,690
Você pode fornecer vários milissegundos.

16
00:00:59,700 --> 00:01:05,520
milissegundos e, em seguida, você pode fornecer um retorno de chamada para executar no final, que vou mostrar em apenas um momento.

17
00:01:05,520 --> 00:01:06,630
O padrão é 400

18
00:01:06,780 --> 00:01:13,740
Então, vou fazer um novo arquivo aqui para demonstrar essa demo de estudo de efeito e vou apenas copiar nossa estrutura

19
00:01:13,740 --> 00:01:18,660
da última página de demonstração e essa irá chamar os efeitos de J Querrey.

20
00:01:18,960 --> 00:01:24,480
Então, nós temos isso configurado e eu vou me livrar de todo este conteúdo

21
00:01:24,480 --> 00:01:27,000
aqui e então vou adicionar algumas divs.

22
00:01:27,120 --> 00:01:33,240
Vamos fazer três divs e vamos usar esses divs e desaparecer e animá-los e deslize-os para cima

23
00:01:33,240 --> 00:01:34,340
e para baixo.

24
00:01:34,450 --> 00:01:43,620
dar-lhes algum conteúdo dentro deste primeiro será que estes não me desvanecem no próximo.

25
00:01:43,620 --> 00:01:45,470
E então vou

26
00:01:45,900 --> 00:01:48,300
Estou implorando por favor.

27
00:01:48,660 --> 00:01:52,380
E, por fim, teremos um que diz ajuda ajudar.

28
00:01:52,720 --> 00:01:55,790
Então, essas divs estão desesperadas para não serem desaparecidas.

29
00:01:56,040 --> 00:01:58,210
Infelizmente, hoje não é o dia da sua sorte.

30
00:01:58,410 --> 00:02:00,230
E nós vamos lutar contra eles.

31
00:02:00,240 --> 00:02:05,280
Então, para tornar isso mais claro, vou adicionar algum estilo aqui às nossas vidas para que eles tenham uma

32
00:02:05,280 --> 00:02:06,720
cor que podemos ver desaparecer.

33
00:02:07,110 --> 00:02:10,900
E eles também têm uma largura e altura que podemos ver deslizar para cima e para baixo.

34
00:02:10,950 --> 00:02:20,200
Então, vou selecionar todos os divs e dar-lhes um total de 100 pixels e uma altura de

35
00:02:20,220 --> 00:02:28,150
100 pixels e um fundo colorido de teal e vamos salvar e vamos abrir isso.

36
00:02:28,860 --> 00:02:30,420
Nós temos três divs.

37
00:02:30,420 --> 00:02:32,570
No entanto, eu gostaria que eles estivessem na mesma linha.

38
00:02:32,880 --> 00:02:36,900
Então, uma maneira de fazer isso é com o flutuador deixado.

39
00:02:37,020 --> 00:02:39,880
Agora eles estão todos na mesma linha, mas eles sangraram um no outro.

40
00:02:40,200 --> 00:02:43,020
Então, para corrigir que podemos adicionar uma margem.

41
00:02:43,020 --> 00:02:46,850
Então, vamos fazer uma margem de 20 pixels em todos os lados.

42
00:02:46,860 --> 00:02:51,930
Agora, acabamos com três quadrados e cada um tem algum texto para dentro e nós realmente não precisamos ir ao

43
00:02:51,930 --> 00:02:56,740
lado da borda, porque eles tudo o que vamos fazer são demonstrar como podemos encaixá-los dentro e fora.

44
00:02:57,060 --> 00:03:03,060
Então, vamos adicionar um botão no topo aqui e este botão só vai me clicar.

45
00:03:03,270 --> 00:03:08,000
E quando clicamos neste botão, o que acontecerá é que nossas animações serão executadas.

46
00:03:08,220 --> 00:03:12,760
Então eu clico neste e esses três itens devem desaparecer para começar.

47
00:03:13,320 --> 00:03:19,350
Então, para reiterar, o desvanecimento tomará um elemento da opacidade total ou qualquer opacidade que esteja atualmente

48
00:03:19,650 --> 00:03:22,500
e desapareceu até o ponto de transparência total.

49
00:03:22,500 --> 00:03:29,730
Então, parece que este é um fadeout de ponto selecionado e podemos fornecer uma seqüência de velocidade opcional tão

50
00:03:29,730 --> 00:03:33,370
lenta ou rápida ou podemos dar uma série de milissegundos.

51
00:03:33,390 --> 00:03:34,490
Então, deixe-me mostrar isso agora.

52
00:03:34,740 --> 00:03:39,870
Na verdade, vou fazer isso em um arquivo separado, então vou fazer um arquivo javascript e salvar.

53
00:03:40,250 --> 00:03:45,000
Eu vou chamar isso afeta apenas o gênio salvo salvo que

54
00:03:47,940 --> 00:03:52,470
meu alerta foi conectado e ligou isso corretamente no fundo.

55
00:03:52,470 --> 00:03:54,020
Basta adicionar uma tag de script.

56
00:03:54,480 --> 00:03:56,450
A fonte é igual a efeitos.

57
00:03:56,560 --> 00:03:57,320
Sim.

58
00:03:57,690 --> 00:04:01,030
E se atualizarmos, recebemos nosso alerta conectado.

59
00:04:01,350 --> 00:04:04,380
Então, o que queremos fazer aqui é o Faid, estas divide-se.

60
00:04:04,380 --> 00:04:10,040
Portanto, precisamos selecionar o dispositivo assim e não desaparecer.

61
00:04:10,380 --> 00:04:13,290
E então podemos fornecer uma velocidade ou simplesmente deixá-lo assim.

62
00:04:13,290 --> 00:04:20,630
E se isso é tudo o que queremos fazer ou atualizar e você pode ver enquanto a página carrega eles começam a desaparecer.

63
00:04:20,640 --> 00:04:23,740
Então vamos fazer isso acontecer quando clicamos no botão.

64
00:04:24,090 --> 00:04:34,800
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.

65
00:04:36,300 --> 00:04:38,480
Então, vamos querer fazer um

66
00:04:38,640 --> 00:04:47,770
Então, quando clicarmos, desapareceremos todos os divs assim e agora vamos atualizar e, se eu clicar, você

67
00:04:48,490 --> 00:04:50,870
pode ver todos eles desaparecerem.

68
00:04:50,980 --> 00:04:56,060
Então, como mencionei, podemos fornecer um número aqui, algo como 1000, que é um segundo completo.

69
00:04:56,260 --> 00:05:02,370
E se eu atualizar, você verá quando eu clicar, ele demora um segundo para que eles desapareçam.

70
00:05:02,620 --> 00:05:09,580
Um ponto importante sobre o fadeout é que, se eu inspecionar a página aqui e eu olho para os elementos, os

71
00:05:09,580 --> 00:05:12,400
divs ainda estão na equipe, ainda no dormitório.

72
00:05:12,430 --> 00:05:15,760
Nós simplesmente não os vemos porque sua exibição foi configurada para nenhum.

73
00:05:15,760 --> 00:05:18,730
Portanto, não os exclui ou não os remove da página.

74
00:05:18,910 --> 00:05:20,010
Está apenas escondendo-os.

75
00:05:20,170 --> 00:05:22,890
E essa é definitivamente uma distinção importante.

76
00:05:22,990 --> 00:05:28,960
Então, digamos que eu queria apenas imprimir uma mensagem uma vez que as divs se apagaram,

77
00:05:28,960 --> 00:05:35,150
então eu as desvaneceria e depois faria algo como esse desvanecer-se concluído quando cancelou o log.

78
00:05:35,680 --> 00:05:39,590
E se eu correr isso, vou abrir o console e observar a ordem em que as coisas acontecem.

79
00:05:39,730 --> 00:05:45,800
Então, quando eu clicar aqui, Faid concluiu o caminho antes que o desvanecimento seja feito.

80
00:05:46,090 --> 00:05:51,490
Então, o que acontece aqui é que selecionamos todas as divs e começamos a desaparecer, mas leva um segundo completo.

81
00:05:52,060 --> 00:05:56,280
E javascript não espera que esse segundo final termine antes de passar para a próxima linha.

82
00:05:56,350 --> 00:06:02,310
Ele imediatamente se mudou para esta linha e imprime o Faid concluído e, em seguida, o desvanecimento termina.

83
00:06:02,470 --> 00:06:08,230
Então, se queremos que o código aconteça logo após o desmame terminar, queremos que ele seja garantido depois

84
00:06:08,680 --> 00:06:11,390
que podemos passar em um retorno de chamada aqui.

85
00:06:11,440 --> 00:06:16,860
E então, este retorno de chamada será chamado dentro do fadeout automaticamente quando estiver pronto.

86
00:06:17,020 --> 00:06:20,830
Então vou mudar nosso registro constante lá e salvar.

87
00:06:21,300 --> 00:06:29,530
E se eu atualizar e agora eu clique no fim desaparecer e, em seguida, obtemos 3 registros de ponto de console

88
00:06:29,540 --> 00:06:31,650
completos Fade para cada um desses.

89
00:06:31,690 --> 00:06:37,390
Um cenário mais comum em vez de apenas imprimir uma string no Cônsul é realmente remover

90
00:06:37,390 --> 00:06:39,220
os elementos assim que desaparecermos.

91
00:06:39,220 --> 00:06:42,580
Então eu mencionei que eles estão escondidos, na verdade não foram embora.

92
00:06:42,660 --> 00:06:47,350
E se quisermos excluí-los como na nossa lista de tarefas, vamos construir quando clicarmos no lixo

93
00:06:47,350 --> 00:06:51,940
ao lado de um item que queremos que ele desapareça lentamente, faça uma boa animação.

94
00:06:52,060 --> 00:06:55,620
Mas, em seguida, simplesmente exclua a página inteiramente do DOM.

95
00:06:55,810 --> 00:07:02,320
Então, precisamos usar um método chamado remover e só queremos removê-lo depois que o fadeout estiver concluído.

96
00:07:03,340 --> 00:07:09,460
Então, isso parece que isso apenas irá remover isso.

97
00:07:10,010 --> 00:07:13,930
E o que isso vai fazer é esperar até que o fadeout seja concluído.

98
00:07:13,990 --> 00:07:17,050
E para cada div, ele executará o método Remove nela.

99
00:07:17,050 --> 00:07:20,430
Então, atualize e clique em clicar em mim.

100
00:07:21,100 --> 00:07:26,650
Eles desaparecem e então, se passarmos aos elementos, você pode ver que nosso corpo só tem um botão

101
00:07:26,650 --> 00:07:29,850
agora e uma etiqueta todas as divs estão completamente desaparecidas.

102
00:07:30,100 --> 00:07:36,520
E se eu comentar essa linha e atualizar, você pode ver onde eles começam aqui três divs e

103
00:07:36,520 --> 00:07:39,130
eu clico no botão e tudo isso acontece.

104
00:07:39,160 --> 00:07:42,910
Eles desaparecem e depois a exibição é definida como nenhuma.

105
00:07:42,910 --> 00:07:51,340
Então, se eu colocar o meu código no lugar errado e eu executei o método Remove aqui, fiz todos os divs

106
00:07:51,430 --> 00:07:52,850
dot remover exatamente assim.

107
00:07:52,900 --> 00:07:57,080
O que realmente aconteceria é que o pedido não está garantido.

108
00:07:57,280 --> 00:07:59,210
E isso vai demorar um segundo.

109
00:07:59,410 --> 00:08:01,800
E este código não aguardará que o segundo termine.

110
00:08:01,930 --> 00:08:06,410
Então, ele começará a desaparecer e depois será removido imediatamente depois.

111
00:08:06,610 --> 00:08:13,150
Então, isso acaba parecendo assim, que começa a desaparecer e imediatamente depois de removê-los.

112
00:08:13,780 --> 00:08:16,450
Então, basicamente, não é desvanecimento.

113
00:08:16,480 --> 00:08:17,110
Então, é por isso que J.

114
00:08:17,110 --> 00:08:21,940
Corey fornece esse retorno de chamada porque é bastante comum para nós querermos fazer algo depois

115
00:08:21,940 --> 00:08:26,810
que desaparecemos algo ou depois de deslizar algo para baixo ou seja qual for a animação.

116
00:08:26,830 --> 00:08:30,760
Então, isso me leva ao meu próximo ponto, que é que eu quero mostrar algumas

117
00:08:30,760 --> 00:08:33,790
das outras animações que podemos fazer para que possamos também desaparecer.

118
00:08:34,030 --> 00:08:40,920
Então, se eu configurar a tela para não ser no começo desse jeito e eu atualizar.

119
00:08:41,020 --> 00:08:46,780
Nós não vemos os divs, porque agora eles estão escondidos em vez de desvanecá-los quando

120
00:08:46,780 --> 00:08:49,840
clicamos, podemos desvendá-los e funciona como você esperaria.

121
00:08:49,840 --> 00:08:55,720
Clique no botão e eles desaparecem em um segundo e, em seguida, se quisermos executar algum código depois, quando sabemos que

122
00:08:55,720 --> 00:09:00,350
eles acabaram de desaparecer, podemos colocar algum código e dizer se o retorno de chamada aqui.

123
00:09:00,970 --> 00:09:02,310
Tudo bem, então Faden.

124
00:09:02,350 --> 00:09:09,610
O GK fornece um método de desvanecimento mais agradável que é chamado de alternar Faid e o alternar Faid funciona da mesma maneira.

125
00:09:10,660 --> 00:09:16,330
Proporciono uma série de milissegundos e saberá se precisa desvanecer algo dentro ou fora dependendo de se

126
00:09:16,330 --> 00:09:18,080
está atualmente mostrando ou não.

127
00:09:18,310 --> 00:09:25,360
Então, se eu atualizar e eu clicar no botão Desligar, ele começa alimentando-os todos e, em seguida,

128
00:09:25,360 --> 00:09:27,020
desaparecendo todos e voltando.

129
00:09:27,040 --> 00:09:32,500
É basicamente como adicionar uma classe à lista de aulas ou usar a classe toggle com Jay

130
00:09:32,500 --> 00:09:35,860
Querrey, onde ele simplesmente decide se precisa desaparecer ou desaparecer.

131
00:09:35,860 --> 00:09:43,960
Tudo bem, de modo que está desaparecendo o próximo conjunto de efeitos que eu quero demonstrar são esses efeitos deslizantes.

132
00:09:44,320 --> 00:09:49,170
Então, aqui em baixo, temos um deslize para baixo, deslize o cursor e deslize para cima.

133
00:09:49,240 --> 00:09:55,270
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á

134
00:09:55,270 --> 00:10:00,640
apresentando em vez de animar a opacidade em um elemento como o Faid, ele realmente anima a altura de um elemento.

135
00:10:01,090 --> 00:10:03,030
Então eu vou mostrar-lhe como isso funciona.

136
00:10:03,130 --> 00:10:04,300
Nós estamos mudando isso.

137
00:10:04,300 --> 00:10:07,870
Em vez de desaparecer, simplesmente deslizaremos.

138
00:10:08,650 --> 00:10:11,810
E é porque quando atualizamos nossos elementos estão escondidos.

139
00:10:11,920 --> 00:10:19,000
Então, se eu correr deslizar para baixo quando clicamos em um botão, você verá que a altura está animada e

140
00:10:19,000 --> 00:10:21,270
a mesma coisa é para deslizar.

141
00:10:21,400 --> 00:10:22,420
Faz o contrário.

142
00:10:22,480 --> 00:10:26,360
Então, se eu me livrar da exibição para que eles estejam mostrando.

143
00:10:26,710 --> 00:10:28,630
E agora eu clico no botão.

144
00:10:28,630 --> 00:10:33,590
Sua altura é animada e eles deslizam para cima e depois exibem o conjunto para Nenhum no final.

145
00:10:33,910 --> 00:10:41,540
E o outro método é slide toggle que funciona exatamente como o Faid alterna onde ele decide o que fazer.

146
00:10:41,650 --> 00:10:48,090
Então, se eu clicar, eles deslizam para cima e agora deslizam para baixo e voltam para cima e para baixo.

147
00:10:48,370 --> 00:10:51,740
Então, é tudo o que há para deslizar para cima deslize para baixo e deslize para baixo.

148
00:10:51,760 --> 00:10:54,320
Eles eram como se fossem métodos analógicos da Faid.

149
00:10:54,610 --> 00:10:57,580
Há também um retorno de chamada opcional que podemos transmitir.

150
00:10:57,790 --> 00:11:04,250
Então, se darmos uma duração igual a 1 segundo e depois eu posso receber minha chamada de volta.

151
00:11:04,600 --> 00:11:09,380
E eu vou fazer outro con. Esse log no slide final é feito.

152
00:11:09,730 --> 00:11:15,250
E isso só será impresso uma vez que o segundo slide completo termine.

153
00:11:15,250 --> 00:11:16,130
Então eu atualizo.

154
00:11:16,270 --> 00:11:24,970
Vejamos o console e eles clicam em me clicar e você pode ver isso apenas impresso assim que o slide

155
00:11:24,970 --> 00:11:25,630
foi feito.

156
00:11:25,630 --> 00:11:28,380
Mesmo aqui, preste atenção aqui.

157
00:11:28,390 --> 00:11:31,330
Isso mudará para seis.

158
00:11:31,330 --> 00:11:32,630
Aqui vamos nós.

159
00:11:33,290 --> 00:11:40,510
Mas, novamente, um padrão mais comum é remover os itens uma vez que os deslocamos ou desaparecemos

160
00:11:40,510 --> 00:11:43,670
ou o que quer que fizemos é removê-los.

161
00:11:43,690 --> 00:11:48,400
Então, aqui levará um segundo para deslize-os e depois eles serão removidos da página.

162
00:11:48,460 --> 00:11:53,970
E se nós vamos para a guia de elementos, nosso corpo está vazio, exceto para esse botão e o script.

163
00:11:54,580 --> 00:11:58,810
Então, espero que eles lhe dê uma boa idéia de como alguns dos efeitos em uma cantera funcionam.

164
00:11:58,810 --> 00:12:02,110
Estes são, de longe, os desvanecimentos e deslizamentos mais comuns.

165
00:12:02,110 --> 00:12:06,190
E nós vamos usá-los em vez de nosso aplicativo de lista de tarefas que vamos começar no próximo vídeo.