Изменение одного из значений массива, в результате чего все значения массива пересчитываются в угловой анимации - PullRequest
Новая
       12

Изменение одного из значений массива, в результате чего все значения массива пересчитываются в угловой анимации

0 голосов
/ 22 февраля 2019

Я сгенерировал 16 ячеек, и в идеале при нажатии на каждую ячейку отображается кружок с анимацией при входе и выходе из элемента кругаЯ столкнулся с двумя проблемами в этом случае: 1) переход не работает, когда круг уходит.2) быстрое добавление и удаление круга иногда приводит к повторной визуализации другого круга.

пример моего кода

app.component.html 

<div class="card">
  <div class="circlecell" *ngFor="let circle of circles; let i=index" data-id="{{i}}" (click)="OnShow(i)">
          <div class="circle" [@show] *ngIf="circle"></div>
      </div>
</div>

app.component.ts 

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';

@Component({
  selector: 'my-app',
  animations:[
      trigger('show',[
          state('in',style({
              backgroundColor: 'red'
          })),
          transition('void=>*',[
            style({
                backgroundColor: 'red',
                transform: 'scale(0)'
            }),
            animate(1000,style({
                backgroundColor: 'green',
                transform: 'scale(1.5)'
            })),
            animate(500)
          ]),
          transition('*=>void',[
            animate(1000,style({
                backgroundColor: 'green',
                transform: 'scale(0)'
            }))
          ])
      ]),
  ],
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

    circles:(boolean)[] = [];

    ngOnInit() {
        for(let i =0;i<16;i++){
          this.circles.push(false);
        };
    }

    OnShow(index){
      this.circles[index] = !this.circles[index];  
    }
}

1 Ответ

0 голосов
/ 08 марта 2019

Я понял, я должен добавить трекбай, без добавления трекбай, ngFor не может отследить правильную ячейку.

...