角2動畫動畫在相同時間我不所有元素想要那個

Question

我想通過類

例如用於每個格或任何按鈕進行動畫元件I具有觸發一些動畫 我想動畫的具體不在同一時間所有的動畫

**，我不希望出現這種情況**

**我想，只有選擇的元素被動畫**

和這是代碼

// ************************ home.component.ts ************************* //

import { Component, OnInit, trigger, state, style, animate, keyframes, 

transition } from '@angular/core'; 
import { BrowserAnimationsModule } from '@angular/platform- 
browser/animations'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'], 
    animations: [ 

    trigger('focusPannel', [ 

     state('inactive', style({ 
     transform: 'scale(1)', 
     backgroundColor: '#eee', 
     })), 

     state('active', style({ 
     position : 'fixed', 
     transform: 'translate(0px, 0px)', 
     top: '0px', 
     left: '0px', 
     backgroundColor: 'purple', 
     color : 'white', 
     width : '100vw', 
     height : '100vh' 
     })), 

     transition('inactive => active', animate('4000ms ease-in')), 
     transition('active => inactive', animate('4000ms ease-out')) 

    ]) 

    ] 
}) 
export class HomeComponent implements OnInit { 

    state: string = 'inactive'; 

    constructor() { } 

    toggleMove() { 
    console.log('clicked'); 

    this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
    } 

    // this func take an event on click 
    gallery(id) { 

    alert(id); 

    } 

    ngOnInit() { 
    } 

} 

// ************** ********** home.component.html ************************* //

<div id="test" class="col s12 m4 l4 "> 
    <button (click)="toggleMove()" class="waves-effect waves-light 
    btn">Press me for animation</button> 
    </div> 

    <div class="content" (click)="toggleMove()" [@focusPannel]='state'>animated div 1</div> 
    <div class="content2" (click)="toggleMove()" [@focusPannel]='state'>animated div 2</div> 

// ************************ home.component.css ****************** ******* //

.content{ 
    padding: 20px; 
    background: #eeeeee; 
    position: absolute; 
    left: 300px; 
} 

.content2{ 
    padding: 20px; 
    background: #eeeeee; 
    position: absolute; 
    left: 500px; 
} 

Answer 1

跟蹤在單獨的屬性你的 「按鈕狀態」/對象

export class HomeComponent implements OnInit { 

    state: any = { 
    content: 'inactive', 
    content2: 'inactive' 
    } 

    constructor() { } 

    toggleMove(key: string /* for example */) { 
    this.state[key] = (this.state[key] === 'inactive' ? 'active' : 'inactive'); 
    } 

    // other code 

} 

模板

<div class="content" (click)="toggleMove('content')" [@focusPannel]='state.content'>animated div 1</div> 
<div class="content2" (click)="toggleMove('content2')" [@focusPannel]='state.content2'>animated div 2</div>