Hey there,
This will be a short one where I just want to show you how you can animate views with Ionic 5 and the awesome ion-segment
component.
Afterward, you will be able to implement a UI similar to this:
So, let's get started.
For the template, we just need an ion-segment
with two or more ion-segment-button
, and two separated containers. I'll be using two ion-list
but feel free to use a div
or any other element according to your needs.
Now we need to know when one of the ion-segment-button
is clicked or touched. This is as easy as adding the ionChange
event listener into the ion-segment
and pass a user-defined callback. For this example, mine is called segmentChanged
.
Also, we use *ngIf
directive to show/hide the ion-list
according to the segment
value. We will change the value of this variable when our segmentChanged
callback is executed, as you will notice in our component file.
<ion-segment (ionChange)="segmentChanged($event)" value="list1">
<ion-segment-button value="list1">
<ion-label>
List 1
</ion-label>
</ion-segment-button>
<ion-segment-button value="list2">
<ion-label>
List 2
</ion-label>
</ion-segment-button>
</ion-segment>
<ion-list *ngIf="segment === 'list1'">
<ion-item>
<ion-label>List 1</ion-label>
</ion-item>
...
</ion-list>
<ion-list *ngIf="segment === 'list2'">
<ion-item>
<ion-label>List 2</ion-label>
</ion-item>
...
</ion-list>
import { Component } from "@angular/core";
@Component({
selector: "app-my-page",
templateUrl: "my-page.page.html",
styleUrls: ["my-page.page.scss"]
})
export class MyPage {
public segment: string = "list1";
constructor() {}
segmentChanged(ev: any) {
this.segment = ev.detail.value;
}
}
Once you implement the code above, you'll notice that the views are toggled correctly.
But what about the nice animation that we saw in the video?
The trick is to add the animate.css library into our project and add the animations through CSS classes.
I first learned this technique from Simon Grimm, a well-known expert and developer in the Ionic community.
BTW I highly recommend checking out their website to learn more about Ionic and Angular.
Animate.css is installed using a two-step process:
First, open your terminal, navigate to your Ionic project, and run the following:
npm install animate.css
Now open the src/styles.css
and add the following line to import the animate.css
library.
@import "~animate.css/animate.min.css";
Note: If you don't have a styles.css
file, try to add the import statement in the global.scss file.
Now, let's go back to our template and add the proper css classes:
<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list1'">
<ion-item>
<ion-label>List 1</ion-label>
</ion-item>
...
</ion-list>
<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list2'">
<ion-item>
<ion-label>List 2</ion-label>
</ion-item>
...
</ion-list>
And that's it! 😅 You can see the result below:
Top comments (1)
What do you think about using Animatable as another option instead of animate.css? We've more than 500 predefined animations :) github.com/proyecto26/animatable-c...