I’ve got an Ionic 4.5.0 app running on Angular and Capacitor, with a few very resource-intensive pages. I’ve tried to implement a few fade-in animations on these pages, and they only fire intermittently, often staying stuck at opacity:0. This seems to happen more frequently on older, slower devices, and with animations that fire on page load. I’ve tried implementing these animations both as pure CSS and within the angular animation library, and both get similar results.
Has anyone dealt with a similar problem? Info and sample code below.
Ionic:
Ionic CLI : 5.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 2.0.0
Capacitor:
Capacitor CLI : 1.1.0
@capacitor/core : 1.1.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : ios 5.0.1
div {
animation: fadein .2s ease-in;
animation-fill-mode: both;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
animations: [
trigger('fadeInOutDelay', [
transition(':enter', [ // :enter is alias to 'void => *'
style({opacity:0}),
animate('200ms 300ms ease-out', style({opacity:1}))
]),
transition(':leave', [ // :leave is alias to '* => void'
style({opacity:1}),
animate('200ms ease-out', style({opacity:0}))
])
])
]
})
<div [@fadeInOut] *ngIf="!fade">Fade this in and out</div>
