CODEWITHSUNDEEP
angularanimationcss-animations
Andre Elrico
Andre Elrico

Reputation: 11500

Restart animation on every new trigger event

https://stackblitz.com/edit/angular-fki9bm?file=src%2Fapp%2Fapp.component.html

When I hit the button slowly every 2seconds its exactly what im looking for. Every trigger event should start at opacity: 0 => opacity: 1.

=> so if I spam the animate button the div should be "invisible" as its always near opacity: 0

I need a general solution because my usecase has n-different trigger states.

Upvotes: 0

Views: 699

Answers (2)

Andre Elrico
Andre Elrico

Reputation: 11500

Updated my https://stackblitz.com/edit/angular-fki9bm?file=src%2Fapp%2Fapp.component.html

it was suprisingly easy

<nav>
  <button (click)="toggle()">Toggle Status</button>
</nav>

<div [@dimming]="status" class="box">
  {{ status == 'active' ? 'Active' : 'Inactive' }}
</div>
  `,
  styleUrls: ['status-slider.component.css'],
  animations: [
    trigger('dimming', [

      transition('* => *', [
        animate('1s', keyframes([
          style({ opacity: 0, offset: 0.5}),
          style({ opacity: 1, offset: 1}),
        ])),
      ]),

    ])
  ]

Upvotes: 0

Hsuan Lee
Hsuan Lee

Reputation: 2330

I'm not sure what you want, but if you want opacity to switch with status every time, you can use the state operator to define the style of the corresponding status.

animations: [
  trigger("slideStatus", [
    state("active", style({ opacity: 1, offset: 1 })),
    state("inactive", style({ opacity: 0, offset: 0 })),
    transition("* => active", [animate("2s")]),
    transition("* => inactive", [animate("2s")])
  ])
]

https://stackblitz.com/edit/angular-fki9bm-4nuth5

Upvotes: 1

Related Questions