Oi, todo mundo.
Nesta palestra vamos falar sobre transições.
Você viu em diferentes exemplos que podemos mudar o estado dos elementos.
Os links podem ir do link normal para o visitado.
Você pode pairar sobre as coisas.
Você pode focá-los.
Bem, e se você quiser realmente ter um pouco de quase animação
quando você faz essas coisas?
É para isso que podemos usar transições.
Então, se você passar o mouse sobre o link, você pode alterar a cor.
Se uma imagem entrar em foco,
ou seja, você pode alterar o tamanho.
E são apenas essas pequenas coisas que às vezes,
quando você está fazendo sua página, dá-lhe um pouco de fator legal que você
estava procurando, para mostrar que você está realmente começando a entender esses conceitos.
Então vamos começar.
Se você quiser adicionar transições à sua página,
há quatro propriedades que você deseja examinar.
A primeira é a propriedade de transição real.
O que você quer mudar?
Você quer mudar o tamanho, a cor, a posição, todos eles?
E quanto à duração da transição?
Quanto tempo deve durar cada transição?
Eles podem acontecer muito rapidamente, onde as pessoas quase nem percebem, ou
pode ser muito longo e atraído.
O tempo de transição é, é um pouco estranho, mas é essa idéia de,
se você vai fazer algo maior, você quer torná-lo lentamente maior e
linear tudo ao mesmo tempo ou você quer que ele para facilitar ou aliviar?
Você pode realmente mudar como, tipo de que velocidade ele está fazendo as coisas diferentes.
Atraso de transição é, você quer que eu espere,
o navegador deve esperar antes de começar a transição?
Se alguém está pairando, você quer que ele paire por dois segundos antes de você continuar?
Você pode querer pensar sobre isso, porque às vezes, quando
as pessoas estão olhando para sua página, eles têm, apenas tem o mouse rodando por todo o lado.
E você não quer tê-los olhando para as transições a menos que eles realmente precisam
estar se concentrando em um elemento.
Tudo bem.
Então vamos em frente e começar.
Se você quiser usar transições, a primeira coisa que você precisa fazer é
exatamente o que você tem feito o tempo todo, definir seu elemento e
dizer que estilo você quer que ele tenha quando você carregar a página pela primeira vez.
Em seguida, você deseja escolher quais elementos você deseja fazer a transição.
Então você pode ter estilizado com cor de fundo, cor, largura e altura.
Você não quer necessariamente mudar todas essas coisas
quando você entra em sua transição.
Então escolha os que você quer mudar.
Em terceiro lugar, defina os novos valores para esses elementos.
E isto é importante.
Você precisa combinar este passo com uma pseudo-classe.
Ele precisa estar junto com um foco ou um foco ou um ativo.
Então vamos olhar para algum código apenas na tela, e
então eu vou executá-lo através de um exemplo real.
Então aqui, eu fui, eu fui em frente e defini uma div para ter apenas cor,
fundo, altura da linha, altura da largura, todas as coisas típicas.
Se você notar, o raio da fronteira é bem pequeno.
São apenas seis pixels.
Em seguida, eu entrei e disse, você sabe o que, eu vou ir em frente e
definir cada uma dessas propriedades.
Então minhas propriedades que eu quero mudar serão cor, largura, fundo
e raio de borda.
Isso é muito, mas eu queria um grande exemplo.
Você pode dizer, eu quero que leve meio segundo,
eu quero que tudo seja praticamente a mesma mudança, e
eu quero que você espere meio segundo antes de começar a transição.
O último passo, o que tinha a ver com a pseudo-classe,
foi adicionar o div:hover e dar os novos valores que eu quero que tudo seja.
Então, em vez de ser negro, quero mudar para branco.
Em vez de a largura ser 250 pixels, eu quero que ele seja 350,
cor de fundo diferente, e um raio de borda muito maior.
Tudo bem? Então vamos em frente e
olhar para um exemplo que eu tenho.
Já programei para te mostrar.
Então, neste exemplo, eu usei uma folha de estilo interna,
em parte porque todo o meu HTML está bem aqui.
Tudo o que tenho é um div.
Como eu chamei isso é dizer que, por enquanto, quando alguém paira sobre esta div,
eu quero que você mude a cor com fundo e raio de borda.
E eu também coloquei ativo,
só porque eu queria mostrar que você pode fazer vários estados diferentes.
Ativo, se você, talvez não se lembre, é quando você está clicando para baixo em um estado.
Então vamos dar uma olhada.
Aqui está minha transição, apenas por padrão, quando você está olhando para a página.
Agora, quando eu passar o mouse sobre ele,
você pode ver que é uma espécie de mudança legal de cor e raio de borda. O
raio da borda pode mudar as coisas de parecer um quadrado
para parecer um círculo.
A última é que agora vou segurar o mouse e
vamos ver o que acontece quando o estado entrar em ação.
Você pode ver, mais uma vez, eu mudei todas essas coisas.
Na verdade, acho isso muito legal.
No entanto, também pode ser muito perturbador.
Portanto, você deseja usar transições com moderação
para se certificar de que não está tirando coisas da sua página.
É possível e
muito comum usar abreviação quando você está escrevendo suas diferentes transições.
Em vez de escrever a duração da transição
, propriedades, coisas diferentes como essa, você pode colocar tudo em uma linha.
Este aqui está dizendo que eu quero mudar o fundo, deve levar 0,2 segundos, e
eu quero aliviar ou eu quero que seja uma transição linear.
Aqui, está dizendo que eu quero ir em frente e mudar o raio da fronteira, quanto tempo
deve demorar, o tipo de transição, e quanto tempo você quer atrasar.
Então, quando você olhar para o código de outras pessoas,
não se confunda se não parecer com o meu primeiro exemplo.
Devem estar usando os atalhos.
Tudo bem.
Então, espero que isso tenha sido um pouco legal e você está animado para ir e
implementar algum tipo de transições em sua página.
Jogar com eles também fará mais do que fazer o seu site parecer meio
colorido e ativo.
Ele vai lhe dar prática na compreensão dessas diferentes
pseudo-classes e estados, como ativo, foco, pairar, etc.
Mas lembre-se que a acessibilidade sempre será um problema
quando você está lidando com diferentes estados na página.
Não exija que as pessoas passem o mouse na sua página.
Não exija que as pessoas vão passar.
Você quer ter certeza de que todo o seu conteúdo está sempre disponível, e
basta manter essas transições para algo um pouco extra para adicionar ao seu site.
Boa sorte.