🧩 Exercícios Práticos: Cap 08 — Transições, Animações Nativas e Motion

Especialização Frontend com Svelte • Trilha de Exercícios Progressivos em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 08.1 — Fixação Conceitual e Sintaxe Inicial

Implemente os conceitos básicos de Transições, Animações Nativas e Motion utilizando Svelte 5 e TypeScript.

Resultado Esperado

Componente de Transições, Animações Nativas e Motion renderizado e verificado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_1_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Transições, Animações Nativas e Motion
🔑 Gabarito de Código & Solução Comentada 
<!-- 08_animacoes_e_transicoes_nativas_n1.svelte -->
<script lang="ts">
  const titulo = 'Transições, Animações Nativas e Motion';
</script>
<div><h2>{titulo}</h2></div>

🔍 Nível 2: Prática

Problema 08.2 — Aplicação com Regras de Negócio

Refatore uma solução simples para aplicar regras de negócio no contexto de Transições, Animações Nativas e Motion.

Resultado Esperado

Execução com validação estrita de dados concluída.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_2_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Transições, Animações Nativas e Motion
🔑 Gabarito de Código & Solução Comentada 
<!-- 08_animacoes_e_transicoes_nativas_n2.svelte -->
<script lang="ts">
  let statusOk = $state(true);
</script>
<p>Validação: {statusOk ? 'Aprovada' : 'Reprovada'}</p>

🚀 Nível 3: Integração

Problema 08.3 — Cenário Integrado e Tratamento de Erros

Crie um pipeline de integração combinando Transições, Animações Nativas e Motion com tratamento de erros e tipagem.

Resultado Esperado

Módulo integrado com sucesso e assertions validadas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_3_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Transições, Animações Nativas e Motion
🔑 Gabarito de Código & Solução Comentada 
// 08_animacoes_e_transicoes_nativas_service.ts
export async function executarOperacao(): Promise<boolean> {
  return true;
}

🏆 Nível 4: Desafio Corporativo

Problema 08.4 — Sistema Robusto com Testes e Auditoria

Construa uma solução corporativa completa de alta resiliência aplicando Transições, Animações Nativas e Motion.

Resultado Esperado

Sistema corporativo homologado com 100% dos testes e auditoria JSON concluídos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_4_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Transições, Animações Nativas e Motion
🔑 Gabarito de Código & Solução Comentada 
// 08_animacoes_e_transicoes_nativas_enterprise.ts
export class GerenciadorCorporativo {
  executarAuditoria(): { status: string; timestamp: number } {
    return { status: 'OK', timestamp: Date.now() };
  }
}