CODEWITHSUNDEEP
javascriptangularanimationionic-frameworkionic2
Kaki Master Of Time
Kaki Master Of Time

Reputation: 1624

Angular 2 Animations in ionic 2

I am making an ap with ionic 2 ANgular 2 and typescript and i needed to use Animations in it. The problem is that the animation duration doesn't work, so the animation is instant.

Animation Code

animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)',
        "transition-duration": "300ms"
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)',
        "transition-duration": "300ms"
      })),
      transition('in => out', animate('800ms ease')),
      transition('out => in', animate('800ms ease'))
    ]),
  ]

NOTE : The transition-duration attribute was added by me in order to force the animation duration and it worked. So the animation duration is 300ms not the 800ms stated in the animate method.

The problem is that i know it is supposed to work without the added transition-duration but in my case it didn't, so what is the problem ?

HTML Code

<ion-list *ngFor="let Position of Positions"  [@slideInOut]="Position.out">
    <ion-item>
      <ion-avatar item-start>
        <img>
      </ion-avatar>
      <h2> {{Position.Name}}</h2>
      <button ion-button icon-only item-end clear large>
        <ion-icon name="checkbox" color="{{Position.voted==true?'secondary':'danger'}}" ></ion-icon>
      </button>
    ............

The out attribute is initially set to "in" then changed to "out".

Upvotes: 2

Views: 1017

Answers (1)

JGFMK
JGFMK

Reputation: 8904

1) Do you have the BrowserAnimationsModule defined as an 'import' in your app-module.ts?

2) Are you using Safari/iOS. You may need web-amimations.js polyfill?

There's also a useful thread here.

Upvotes: 2

Related Questions