Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Animação de filtragem está sendo disparada ao marcar a tarefa

Referente ao curso Angular: aprimore suas técnicas de animação e crie interfaces ainda mais atraentes, no capítulo Botão animado com query e group e atividade Sinalizando a validação

por Henrique Lacerda de Oliveira Pineli
| 72k xp | 30 posts

Por algum motivo, ao marcar ou desmarcar uma tarefa a minha lista está disparando a animação de filtragem , como se eu estivesse digitando algo no campo de busca. por qual motivo ?

export const checkTrigger = trigger('checkOrNot', [ transition('* => check', [ animate( '400ms ease-in', style({ transform: 'scale(0.4)', }) ), ]), ]);

export const filterTrigger = trigger('filterCards', [ transition(':enter', [ style({ opacity: 0, width: 0, }), animate( '400ms ease-out', keyframes([ style({ offset: 0, opacity: 0, width: 0, }), style({ offset: 0.8, opacity: 0.5, width: '', }), style({ offset: 1, opacity: 1, width: '', }), ]) ), ]), transition(':leave', [ animate( '400ms ease-out', style({ opacity: 0, width: 0, }) ), ]), ]);

<input type="search" id="campo-busca" placeholder="Busque por uma tarefa" [(ngModel)]="campoBusca" (keyup)="filtrarTarefas(campoBusca)"> <div *ngIf="tarefasFiltradas.length > 0, else semTarefas"> <div class="lista-tarefas card-{{ tarefa.categoria }}" *ngFor="let tarefa of tarefasFiltradas;let i = index" (mouseover)="indexTarefa = i" [@destaqueCard]="indexTarefa === i ? 'destaque' : 'default' " [@filterCards]="">

Ícone de {​{ tarefa.categoria }} {{ tarefa.categoria }}

{{ tarefa.prioridade }}

<button

        [ngClass]="(tarefa.statusFinalizado == true) ? 'icone-checked' : 'icone-unchecked'"
        (click)="finalizarTarefa(tarefa.id);"
        [@checkOrNot]="(tarefa.id) === id ? 'check' : 'unCheck' ">
      </button>
2 respostas
por Estudante
| 102k xp | 350 posts

Manda o código completo no github.

Abs

solução!
por Henrique Lacerda de Oliveira Pineli
| 72k xp | 30 posts

Opa meu amigo, cara eu implementei uma solução um pouco diferente para esse caso, consegui resolver, Pelo visto toda vez que eu clicava no botão para checkar a tarefa a lista de tarefas era atualizada e consequentemente a animação de filtragem era ativada, então fiz essas modificações no codigo em relação ao projeto original

finalizarTarefa(id: number) { this.id = id; this.service.buscarPorId(id).subscribe((tarefa) => { this.service.atualizarStatusTarefa(tarefa).subscribe(() => { // Atualize somente o status da tarefa localmente const tarefaLocal = this.tarefasFiltradas.find(t => t.id === id); if (tarefaLocal) { tarefaLocal.statusFinalizado = !tarefaLocal.statusFinalizado; } }); }); }

trackById(index: number, tarefa: Tarefa): number { return tarefa.id; }

usei um trackById e ao inves de ultilizar o id da tarefa para dar o check eu usei o status da tarefa

<button

        [ngClass]="(tarefa.statusFinalizado == true) ? 'icone-checked' : 'icone-unchecked'"
        (click)="finalizarTarefa(tarefa.id);"
        [@checkOrNot]="(tarefa.statusFinalizado) ? 'check' : 'unCheck' ">
      </button>
      
      
      export const checkTrigger = trigger('checkOrNot', [

transition('check => unCheck', [ animate( '300ms ease-out', style({ transform: 'scale(1.02)', }) ), animate( '300ms ease-out', style({ transform: 'scale(1.0)', }) ), ]), transition('unCheck => check', [ animate( '300ms ease-out', style({ transform: 'scale(0.8)', }) ), animate( '300ms ease-out', style({ transform: 'scale(1.0)', }) ), ]), ]);

Até o momento funcionou, as tarefas são filtradas ao digitar no campo de busca e quando eu clico no botao para checkar as tarefas apenas a animação de check é ativada.