Animations No longer triggering Angular 4+

Question

Using Angular Animations, and it was working fine for a long while, and now it's just stopped. No errors, just not firing.

I've defined the transitions and states like so:

@Component({
  animations: [
    trigger('form2Head',[
      state('hidden', style({
          transform: 'translateY(-85%)'
      })),
      state('shown', style({
        transform: 'translateY(0)',
      })),
      transition('hidden <=> shown', animate('300ms ease-in')),
    ]),
  ],

and defined the animation binding in my component HTML like so:

<div class="container" id="mainOuter" [@form2Head]='showModal'>
  <div class="container" id="mainInner">
    <form class='frm'>
      <h1>Please Enter Your Access Code:</h1>
      <label for="AccessCode">Access Code:</label>
      <input type="text" name='AccessCode' placeholder="Access Code" [(ngModel)]='AccessCode'>
      <button class="submit" (click)='routeConfirm(AccessCode)'>Submit</button>
    </form>
    <div class="straggler">
      <i class="fa fa-gear" id='reset'(click)='animate()'></i>
      <h1 class="sweeptitle">--- Title Of Sweep ---</h1>
      <h1 class="tagline">--- Tagline ---</h1>
    </div>
  </div>
</div>
<div class="modalContainer"[@form2Head]='showModal' *ngIf='clicked==true'>
  <app-confirm [Id]='AccessCode'></app-confirm>
</div>

and controlling the animation in the component TS file like so:

  animate(): void{
    this.showModal = (this.showModal === 'hidden'? 'shown': 'hidden');
    console.log(this.showModal);
  }

and

 clicked: boolean = false;
  routeConfirm = function(): void{
    this.clicked = !this.clicked;
    this.animate();
  }
}

Not sure why it would stop though...

Do you have added new attributes on class="container" or id="mainOuter"? Like translate in a the stylesheet. — Vega
– Vega, Commented Jul 31, 2017 at 19:23
I'm not sure what you're asking, and I'm using the Angular Animations module to process the animation. It's all controlled by the typescript, and not in the CSS. Although my initial positions are in the CSS. — Chris Rutherford
– Chris Rutherford, Commented Jul 31, 2017 at 19:38
I explain myself: do you have any translate in the component stylesheet? And related or not : class="modalContainer"[@form2Head]='showModal' need to be spaced — Vega
– Vega, Commented Jul 31, 2017 at 19:43
there is a single translateY function on the app-confirm component. and none in it's parent container, which is the component shown above — Chris Rutherford
– Chris Rutherford, Commented Jul 31, 2017 at 19:54

Vega · Accepted Answer · 2017-07-31 19:28:04Z

2

Angular doesn't show animations when it's applied with an *ngIf. Put a wrapper on the div with *ngIf and apply the animation on it

answered Jul 31, 2017 at 19:28

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cyr_x Over a year ago

Or if you don't want to alternate your markup use *ngIf on both element with the animation and use the :enter and :leave transitions.

Chris Rutherford Over a year ago

I moved the *ngIf to the app-confirm tag so that it would only apply to the component tag and not the containing div. Still not working....

Collectives™ on Stack Overflow

Animations No longer triggering Angular 4+

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related