Escrevendo uma função de transição personalizada
Retorne funções CSS ou tick de uma transição personalizada para animar a entrada e a saída do DOM.
Escrevendo uma função de transição personalizada é 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 personalizadas
Além das opções integradas, você pode escrever funções de transição totalmente personalizadas.
Assinatura da função
Uma função de transição recebe (node, params) e retorna um objeto de opções.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Usar sua transição
Aplique-a com transition:spin a qualquer elemento.
Função CSS
Retorne uma função css(t, u). O valor inicial vai de 0 a 1; o valor final vai de 1 a 0.
Função JS (atualização por quadro)
Para valores que não podem ser animados por CSS, retorne uma função tick.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";Quando usar CSS em vez da atualização por quadro
CSS é mais rápido (acelerado pela GPU). Use a atualização por quadro somente quando CSS não puder expressar a alteração.
Aceleração
Aplique a aceleração dentro da sua função ou aceite-a como parâmetro.
Atraso e duração
Retorne delay e duration no objeto de opções.
Biblioteca reutilizável
Crie um módulo de transições para o seu sistema de design.
Consciência da direção
A estrutura chama sua função ao entrar; uma direção oposta é usada ao sair.
Combinar com in/out
Você pode usar uma função personalizada para a entrada e outra para a saída por meio de in: e out:.
Verificação rápida
O que a função css recebe em uma transição?
Recapitulação
Defina transições personalizadas retornando { duration, css } ou { duration, tick } de uma função.
Perguntas Frequentes
A aula “Escrevendo uma função de transição personalizada” é grátis?
Sim — o texto completo de “Escrevendo uma função de transição personalizada” é 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 “Escrevendo uma função de transição personalizada”?
Retorne funções CSS ou tick de uma transição personalizada para animar a entrada e a saída do DOM. 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 “Escrevendo uma função de transição personalizada”?
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