Criando uma transição de transformação
Crie uma transição que transforme um elemento de uma forma ou posição em outra.
Criando uma transição de transformação é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Conceito de transformação gradual
Uma transição de transformação gradual transforma suavemente um elemento de uma forma ou posição em outra.
Ler o estado inicial
Meça o layout inicial do elemento usando getBoundingClientRect.
Calcular a diferença
Compare as posições inicial e final para obter os valores da transformação.
Aplicar transformação
Retorne uma função css que interpole do estado inicial ao final.
css: (t) => `transform: scale(${1 - (1 - t)}); opacity: ${t};`Padrão semelhante ao FLIP
Isso é semelhante à técnica FLIP usada por animate:flip.
Transições de elementos compartilhados
Para elementos compartilhados entre rotas, bibliotecas como svelte-shared-transitions são úteis.
Caixa delimitadora
Calcule a escala e a translação para transformar uma posição em outra.
API do navegador
A API de transições de visualização permite transições nativas de elementos compartilhados; o Svelte funciona bem com ela.
Desempenho
Prefira transform e opacity; evite animar propriedades que definem a geometria.
Combinar aceleração
Use funções de aceleração para obter um movimento natural; cubic-bezier é excelente para transformações graduais.
Uso prático
Um modal abre a partir do botão clicado, um item de lista se expande para a visualização detalhada e ocorrem transições entre rotas.
Verificação rápida
Quais propriedades são melhores para transformações graduais?
Recapitulação
As transições de transformação gradual medem as posições inicial e final e interpolam usando textos CSS baseados em transform.
Perguntas Frequentes
A aula “Criando uma transição de transformação” é grátis?
Sim — o texto completo de “Criando uma transição de transformação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Criando uma transição de transformação”?
Crie uma transição que transforme um elemento de uma forma ou posição em outra. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Criando uma transição de transformação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Escrevendo uma função de transição personalizada
- Parâmetros de transição: node duration delay
- Criando uma transição de transformação
- Transições CSS versus JS