각도이 애니메이션은 내가 각 사업부 또는 어떤 버튼 예를 들어 클래스</p> <p>에 의해 요소를 애니메이션을 적용 할

Question

나는 내가 애니메이션을 할 몇 가지 애니메이션 를 트리거해야한다는 원하는 내가 그나마 같은 시간에 모든 요소를 ​​애니메이션입니다 같은 시간에 특정 모든 애니메이션이

** 내가

** 난 단지 선택된 요소는 애니메이션 것을 원하는 ** 원하지 않는다 **

이 코드

//입니다 ************************ 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>