I’m trying to add animation to my pages but I’m failing. When I checked the docs , I found out that there is no animation tag in your code
How did you guys achieve this ?
The animations are done with css:
// iOS View Transitions
// -------------------------------
$ios-transition-duration: 500ms !default;
$ios-transition-timing-function: cubic-bezier(.36, .66, .04, 1) !default;
$ios-transition-container-bg-color: #000 !default;
[nav-view-transition="ios"] {
[nav-view="entering"],
[nav-view="leaving"] {
@include transition-duration( $ios-transition-duration );
@include transition-timing-function( $ios-transition-timing-function );
-webkit-transition-property: opacity, -webkit-transform, box-shadow;
transition-property: opacity, transform, box-shadow;
}
&[nav-view-direction="forward"],
This file has been truncated. show original
If you want to add animated transitions take a look at this forum post:
If anyone's interested, I found a way to use native view transitions with Ionic Framework. This solution will only work on smartphones, so desktop browsers and Ionic View are out of the question. Requirements To make this work we need Telerik...
Reading time: 7 mins 🕑
Likes: 28 ❤
This approach uses Cordova Native Transition plugin.