Angular 2 个动画同时为所有元素设置动画

Question

我想通过 class 为元素设置动画。

例如，对于每个 div 或任何按钮，我都必须触发动画我想同时为特定元素 - 目标而不是所有目标元素设置动画。

I get this result, but I dont want that.

I want something like this insted.

我的代码：

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

在单独的 property/object

中跟踪您的 "button state"

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>

Angular 2 个动画同时为所有元素设置动画

Angular 2 animations is animating all the elements at the same time

angular

angular2-animation

home.component.ts

home.component.html

home.component.css