css - Angular - animație în trepte pentru elementele listei

Am o tranziție definită astfel:

transition('show-content => hide-content', [
    query('.project-view-item', [
        style({
            opacity: 1,
            transform: 'translateX(0px)'
        }),
        stagger('0.3s', [
            animate(
                '0.2s',
                keyframes([
                    style({
                        opacity: 0,
                        transform: 'translateX(-40px)',
                        offset: 1
                    })
                ])
            )
        ])
    ])
])

Totul funcționează conform așteptărilor. Obiectele se duc spre stânga și dispar treptat. Problema este că după ce toate obiectele devin ascunse, stilul se resetează și devin vizibile din nou toate odată. Este ca și cum aș avea nevoie de acea proprietate CSS3 numită animation-fill-mode: forwards.

Cum pot să fac asta în Angular? Cum pot să păstrez ultima stare a animației?

Plnkr https://plnkr.co/edit/te0tJ76GkhkaRxF2LI2B

Răspuns #1

Începerea animației și finalizarea animației vor ajuta aici:

HTML

    <div class="project-view" (@content.start)="start($event)" 
    (@content.done)="done($event)" [@content]="isShowContent ? 'show-content': 'hide-content'">
        <div class="myClass">
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
        </div>
    </div>

Typescript:

  hideContent(callback?) {
    console.log("HIDE CONTENT CALLED");
    this.isShowContent = false;
    this.callback = callback;
  }

  showContent(callback?) {
    console.log("SHOW CONTENT CALLED");
    this.isShowContent = true;
    this.callback = callback;
  }

  done(event) {
    if (this.isShowContent) {
      document.querySelector('.myClass').setAttribute('style',
        "opacity:1;transform: 'translateX(0)')");
    }
    else {
      document.querySelector('.myClass').setAttribute('style',
        "opacity:0;transform: 'translateX(-40px)')");
    }

  }

  start(event) {
    document.querySelector('.myClass').setAttribute('style',
      "opacity:1; transform: 'translateX(-40px)')");
  }

Demo

Răspunsul #2

De asemenea, este posibil să adăugați declarația state animațiilor dvs., astfel încât să nu fie nevoie să vă încărcați șabloanele și fișierele TS cu logica animațiilor:

transition('show-content => hide-content', [
    ....
]
state('hide-content', style({opacity: 0})),