0

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":

  • immediately switch to a grey background.
  • take 1s to make the border rounded.
  • then take 500ms to fadeout the rounded border and fadein the target style

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

Jem
  • 6,226
  • 14
  • 56
  • 74
  • 1
    try to use the new animations module, instead of the old one (https://angular.io/guide/animations) from @angular/animations. The old one is deprecated. – ForestG Mar 23 '18 at 11:33
  • Indeed! Thanks. Too bad it didn't fix my behavior though. – Jem Mar 23 '18 at 11:54

1 Answers1

1

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)
      ])
    ])
  ]
})
Jem
  • 6,226
  • 14
  • 56
  • 74
  • Man, you've saved me a night of annoyance. Been trying to figure this out. According to the tutorial I saw, your original codes should work. Thanks! – Akin_Glen Sep 17 '21 at 19:59