Using Angular 2 Animations with Ionic 2

Ionic Framework ionic-v3
#1

Hi,

Is someone uses the angular animations 2 with 2 Ionic? with success?

An example:

animations: [
    trigger('animateState', [
        state('swipe-left', style({
            opacity: 0.5
        })),
        state('swipe-right', style({
        })),
        transition('* => swipe-left', [

            animate(600, keyframes([
                style({ opacity: 1, left: '-100%', offset: 0.5 }),
                style({ opacity: 0.5, left: '0%', offset: 1 })
            ]))
        ]),
        transition('* => swipe-right', [
            animate(600, keyframes([
                style({
                    left: '+90%',
                    offset:0.5
                }),
                style({
                    left: '0%',
                    offset: 1
                })
            ]))
        ]),
    ])
]

The animations were working before, but since beta 10 and beta 11, they no longer work.

In my app, when animationState change to ‘Swipe-Left’:

  • The animation is not triggered
  • Then the binding no longer works (If I change a value, the UI does not update)

Someone has the same problem? or the angular 2 animations run on your app?

EDIT: change on code (I wanted to clarify the code, I removed too much, above animation code as present in app)

#2

There is a little different syntax for an animation. See an example from angular.io

 trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
#3

Thanks for your answer.

Is it working on Ionic beta 11?

#4

Yes, I’ve been using Angular 2 animations and have some tutorials on it:


Second one has a working demo.

#5

Thanks a lot for your answer.

I changed:

animate(600, keyframes([

to

animate('600ms ease-in', keyframes([

and it’s working again.

#6

Here’s another example for a slide in/out animation:


( full tutorial: http://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/ )

#7

Hey there… I am also using the animation example from angular 2 in Ionic 2 RC 4… but still the same problem of toggleState() is not function

.ts :

   import { Component, Input, trigger, state, style, transition, animate } from '@angular/core';
  
    @Component({
       selector: 'page-jobs',
       templateUrl: 'jobs.html',
       animations: [
         trigger('jobState', [
         state('inactive', style({
         backgroundColor: '#eee',
         transform: 'scale(1)'
           })),
         state('active', style({
         backgroundColor: '#cfd8dc',
         transform: 'scale(1.1)'
          })),
         transition('inactive => active', animate('100ms ease-in')),
         transition('active => inactive', animate('100ms ease-out'))
        ])
      ]
    })

  export class JobsPage {
        @Input() jobs: Jobs[]
        state: string = 'inactive';

  constructor(.....................................) { } 

  toggleState(){
     this.state = (this.state === 'active' ? 'inactive' : 'active');
  }

.html

   <ion-header>
     <ion-navbar>
        <ion-title>Jobs</ion-title>
     </ion-navbar>
   </ion-header>

  <ion-content class="card-background-page">
     <ion-refresher (ionRefresh)="doRefresh($event)">
            /////////////ion-refresh-content
     </ion-refresher>

   <ion-card  *ngFor="let job of jobs" class="job-card">
       <ion-card-header>
          <button ion-item [@jobState]="job.state" (click)="job.toggleState()" (click)="goToCompanyDetails(job)">
          <h2 dir="auto">{{job.position_title}}</h2>
           </button>
       </ion-card-header>

can someone help , thanx

#8

Hi Yasir,

Within your implementation, job does not have a method toggleState(). The toggleState method is declared for the JobsPage class.

If you want to toggle the state for each Job then the Jobs class needs to have a state property, and a toggleState method. If you share the Jobs class with us I’m sure we will be able to help you further. You may also wish to start a new post explaining your issue.

1 Like
#9

its ok, this solved it

 <button [@jobState]="state" ion-button color="light" (click)="toggleState()">hello</button>
#10

Hello,

I came across this discussion while looking for some angular animation examples. I don’t know if you guys remember “animate-href” from AngularJS / Angular 1. Basically if you had an img and wanted that image to persist between routes for example and move to its new location on the new route / page, you would use animate-href to achieve that.

Any idea if there’s a similar concept in Angular2/4 ?

Thank you !!