How to implement a basic Slide animation?

Ionic Framework ionic-v3
1

Hello, I have never implemented ionic animations. How do I implement a basic slide animation to left, on-click of a button ?

Thank you

2

This is how you can add a click function.

HTML

<button ion-button (click)="myFunction()">BUTTON</button>

TS

myFunction(){
//add your function here
}

Done

If you want to add an animation with CSS you have to create a class for that. Also we have to add an ID to the button.
In this simple example we add the CSS class to the button to start the animation.

HTML

<button ion-button (click)="myFunction()" id="myFunctionButton">BUTTON</button>

CSS (i took an example animation from a different website)

.animation {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

TS

myFunction(){
document.getElementById("myFunctionButton").classList.add('animation');
}

Done, the animation should play now when you pressed the button. You can also add the ID to a different DIV and it will play the animation to that specific DIV.

Hope it helped you!
Happy coding :smile_cat:

1 Like