角度2动画* ng仅适用于一个元素

时间:2018-03-02 06:40:37

标签: angular animation cycle

我在* ngFor中使用动画。当我点击并执行动画时,它会在循环中为所有元素设置动画,但我希望动画只有一个。我怎样才能做到这一点 ? .................................................. .................................................. .................................................. ...

http://joxi.ru/82QYVWGSjBRGM2

   @Component({
    selector: 'app-popular-sensor',
    templateUrl: './popular-sensor.component.html',
    styleUrls: ['./popular-sensor.component.css'],
    animations: [
        trigger('focusPanel', [
            state('in', style({
                height: '20px'
            })),
            state('out', style({
                height: '*',
            })),
            transition('in => out', animate('400ms ease-in-out'))
        ])
    ]
})

export class PopularSensorComponent implements OnInit {

    goods;
    state = 'in';

    constructor(private goodsService: GoodsService) {
        goodsService.getGoods()
            .subscribe(goods => {
                this.goods = goods;
                console.log(this.goods);
            });
    }

    toggleChar() {
        this.state = this.state === 'in' ? 'out' : '';
    }

    ngOnInit() {

    }

}

HTML:

  <div *ngFor="let g of goods"
         class="col-sm-4 col-xs-12">
        <div class="sensor-block">

            <div class="char_block"
                 [@focusPanel]="state">
                <small *ngFor="let c of g.charact">{{c.name}}</small>
            </div>

            <div class="characteristic"
                 (click)="toggleChar()">Все характеристики смарт стола
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:2)

&#34; key&#34;不使用全局变量,而是变量属于对象&#34; g&#34;

<div class="char_block"
                         <!--g.state-->
                 [@focusPanel]="g.state"> 
                <small *ngFor="let c of g.charact">{{c.name}}</small>
            </div>
                 <!--change g.state-->
            <div class="characteristic" 
                 (click)="g.state=='in'? 'out':'in'">Все характеристики смарт стола
            </div>