transition:fade e transition:fly
Aplique transições integradas de desaparecimento e deslocamento aos elementos controlados por {#if}.
transition:fade e transition:fly é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 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.
Transições integradas
O Svelte inclui várias transições em svelte/transition: fade, fly, slide, scale, blur, draw.
Importar uma transição
Importe as que você precisar.
import { fade, fly } from "svelte/transition";Aplicar com transition:
Aplique com transition: em um elemento controlado por {#if}.
{#if visible}
<p transition:fade>Hello</p>
{/if}Transição fly
A transição fly move os elementos de um deslocamento de coordenadas até a posição final.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}Objeto de parâmetros
Passe opções como x, y, duration, delay e easing.
Quando os gatilhos são executados
As transições são executadas na montagem e desmontagem do elemento dentro de blocos {#if}, {#each} ou {#await}.
Combinando transições
Aplique uma transição por diretiva. Use in: e out: para transições assimétricas.
Experiência de usuário suave
As transições deixam a interface refinada sem que você precise escrever quadros-chave manualmente.
Desempenho
As transições integradas usam CSS sempre que possível para obter aceleração por GPU.
Movimento reduzido
Respeite prefers-reduced-motion aplicando transições condicionalmente.
Suavização
Passe uma função de suavização de svelte/easing para obter um movimento mais sofisticado.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>Verificação rápida
Onde as transições são executadas?
Recapitulação
Importe de svelte/transition, aplique com transition: e passe objetos de parâmetros para controlar o comportamento.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “transition:fade e transition:fly” é grátis?
Sim — o texto completo de “transition:fade e transition:fly” é 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 “transition:fade e transition:fly”?
Aplique transições integradas de desaparecimento e deslocamento aos elementos controlados por {#if}. 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 1 de 4.
Quanto tempo leva a aula “transition:fade e transition:fly”?
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
- transition:fade e transition:fly
- Parâmetros de transição: duration delay easing
- in: e out: para transições assimétricas
- transition:draw para caminhos SVG