How to use ionic animations Ionic 7

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

BrowserAnimationsModule

To use animations in Angular, you can follow these steps:

1. Set up your Angular project: Make sure you have an Angular project set up and running. You can use the Angular CLI to create a new project or work with an existing one.

2. Import the required modules: Angular provides the BrowserAnimationsModule and NoopAnimationsModule modules for handling animations. Import the desired module in your main AppModule or in a specific module where you want to use animations.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,BrowserAnimationsModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

1. Define animations: In Angular, animations are defined using the @Component decorator or the @Directive decorator. You can define animations inline or in a separate file using the @Component decorator's animations property. Angular provides a powerful animation DSL (Domain Specific Language) that allows you to define various types of animations.

Here's an example of defining a simple fade-in animation:

home.page.ts

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  animations: [
    trigger('slideinleft', [
      transition('void => *', [
        style({opacity: 0, transform: 'translateX(-150%)'}),
        animate('750ms ease-in', style({transform: 'translateX(0%)', opacity: 1}))
      ])
    ]),
    trigger('slideinright', [
      transition('void => *', [
        style({opacity: 0, transform: 'translateX(-150%)'}),
        animate('900ms 400ms ease-in', style({transform: 'translateX(0%)', opacity: 1}))
      ])
    ]),
    trigger('fadein', [
      transition('void => *', [
        style({opacity: 0}),
        animate('900ms 300ms ease-in', style({opacity: 1}))
      ])
    ]),
    trigger('slideup', [
      transition('void => *', [
        style({opacity: 0, transform: 'translateY(150%)'}),
        animate('900ms 600ms ease-in', style({transform: 'translateY(0%)', opacity: 1}))
      ])
    ]),
  ]
})
export class HomePage {
  constructor() {}
}

1. Apply animations to elements: Once you have defined the animations, you can apply them to elements using the [@animationName] syntax. For example, in the above code snippet, we applied the fadeIn animation to the <div> element using the [@fadeIn] attribute.

2. Use animation triggers: Animation triggers are used to control when animations start and how they transition between states. In the example above, we used the :enter and :leave aliases to specify the animation should be triggered when the element is added or removed from the DOM.

home.page.html

<ion-header color="primary">
  <ion-toolbar color="dark">
    <ion-title>
      My Animated App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">

    <ion-row>
      <ion-col size="12" class="ion-text-center" @slideinleft>
        <h2>The Ionic Academy Coding Studio</h2>
      </ion-col>

      <ion-col size="12" class="ion-text-center" @slideinright>
        <span class="ion-text-center subtitle">Learn Ionic Fast
      </ion-col>

      <ion-col size="12" @fadein>
        <ion-img
          src="https://wallpaperaccess.com/full/1346596.jpg"></ion-img>
      </ion-col>

      <ion-col size="12" @slideup>
        <ion-card>
          <ion-card-content>
            <ion-text>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta,
              inventore perspiciatis. Velit, quos. Consectetur dolores nulla
              repudiandae quidem et numquam maxime rerum cum. Distinctio
              voluptates id commodi, odit numquam saepe.
            </ion-text>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>

</ion-content>

These are the basic steps to use animations in Angular. You can explore more advanced animation features, such as keyframes, state-based animations, and more, in the Angular documentation: https://angular.io/guide/animations