Ionic Animations | Ionic | Vue
In this video we will see Ionic animation. So on this page order related jobs are displayed. As we click on the view button, a job configuration component will open on the side of the job card. We will achieve this using ionic animation.
Before applying ionic animation, the main and aside component are looking like this. Now firstly we will hide this component by using some styling. The job configuration component is enclosed between the aside tag so we will apply styling on the aside tag. We will set its width to 0px. Now we will apply opacity and set its value to “0” so that it is hidden initially and is viewed through ionic animation.
Now create a method for viewing the aside job component . In this method we will now write code of animation. We will create a variable called aside animation and will assign a predefined create animation function to it which we have already imported. Then we will add method addElement to point towards the element on which animation will be performed. We are pointing towards “aside” so inside document.querySelector we will write “aside”. Next we will set the animation duration. Here we are using keyframe animation. Ionic animation allows you to control the intermediate steps in an animation using keyframes. Every keyframe object contains an offset property. Offset is a value between 0 and 1 that defines the keyframe step. Offset must go in ascending order and cannot repeat.
Now we will set offset to 0, flex to 0 and opacity to 0. Then we will set offset to 0.5, flex to 1 and opacity to 0. Lastly we will set offset to 1, flex to 1 and opacity to 1. Now we will play this animation using the play function. After this we will call this method on the click of view button. As we can see our animation is working on the asise component. Next we want a gap between this card and the component, this we will achieve by applying animation on the main element.
Create another variable same as we created for an aside element. In this we will point towards the main element. Set duration and add fromTo method. This method sets the start and end styles of the animation. We are setting the gap between main and aside here so in fromTo we will give “0” as start value and we can pass css variable as value so as end value I will pass a predefined spacer variable . Next we will play the animation the same as we did with aside animation.
Next we can apply some easing to our animation using the easing method. In this way we can animate in our ionic app. You can refer to official Ionic animation documentation for more details.
Documentation link: https://ionicframework.com/docs/utili...
App link: https://github.com/hotwax/job-manager
#ionic #vue #animation #html #css #javascript