Угловая анимация, нажмите, какую, какую переместить

Question

Я хочу щелкнуть, какой, какой переместить, а не один, оба переместить

Как $ (это) в jQuery

Что мне делать в угловой анимации?

https://stackblitz.com/edit/angular-adjxmb

Answer 1

Сделано это зацикливанием. Надеюсь, это поможет вам!

app.component.html

<div  *ngFor="let card of cards">
    <div class="open-close-container" [@openClose]="card.isOpen ? 'open' : 'closed'"(click)="card.isOpen = !card.isOpen">
      <i class="fa fa-chevron-down" aria-hidden="true">{{card.name}}</i>
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
    </div>
</div>

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Component, HostBinding } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class OpenCloseComponent {
  // isOpen = true;
  cards = [{name:'div1',isOpen:true},{name:'div2',isOpen:true}];
  // toggle(card) {
  //   console.log("card.open--",card.open)
  //   card.open = !card.open ;
  // }

}

Я обновил код в вашей демоверсии