Ionic 2 Web Animation API

Ionic Framework ionic-v3
1

Hi,

I try to find how to use the Web Animation Api available in Ionic 2. Is there an example or tutorial available ?

Thanks a lot !

1 Like
2

Was about to post the exact same topic so i post here. Looking for examples.

1 Like
3

This is more Angular 2 related. Actually its really simple to get great results. I wrote a blog article about how to do a slide animation. This works in ionic too, even if you probably don’t want to implement your own navigation here. The most important part is to understand the interaction between the trigger call and the state.

<element [@yourTrigger]="state ></element>

  animations: [
    trigger('yourTrigger', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)'
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ]),
  ]

where state is a variable in your component that can be toggled from value: "in" to "out" then you have your animation.

See the mentioned example:

Tell us what animation you want and we’ll build an example.

4

Maybe, but there’s a module in ionic-angular who seem to handle Animation, probably just a wrapper with some pre configured animations, and it would be nice to have the docs.