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]="">

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