CODEWITHSUNDEEP
angularangular-animations
Jem
Jem

Reputation: 6406

Angular animations: Transition phase doesn't wait

The following sandbox shows my issue:

https://stackblitz.com/edit/ngx-anims-transition-issue

see ./app/components/transition-phases/transition-phasescomponent.ts

The 3rd tab expects the following to happen upon clicking on "toggle state":

For some reason, the rounded border is applied immediately, like the 1000ms transition isn't taken into account. What am I missing?

Upvotes: 0

Views: 726

Answers (1)

Jem
Jem

Reputation: 6406

Well, so far - and it looks like a workaround - by forcing a default border-radius to 0, it works:

const transitionStyleSquareBorder = { 'border-radius' : '0px'};
const transitionStyleBorderRounded = { 'border-radius' : '40px' };

@Component({
  selector: 'app-transition-phases',
  templateUrl: './transition-phases.component.html',
  styleUrls: ['./transition-phases.component.css'],
  animations: [
    trigger('divActivatedState', [
      state('idle', style(idleStateStyle)),
      state('active', style(activeStateStyle)),
      transition('idle <=> active', [

        // Set transition color immediately
        style(transitionStylecolor),
        style(transitionStyleSquareBorder),     // <- WORKAROUND

        // Make its border rounded in 500ms
        animate('500ms', style(transitionStyleBorderRounded) ),

        // Take 500ms to fade-out the rounded border and fade-in the target style
        animate(1000)
      ])
    ])
  ]
})

Upvotes: 1

Related Questions