我正在使用 ionic v5.6.13和 angular v12.1.1
我有一个动画,它.fadeInBottom
从底部的类中淡入所有元素。
它在 iOS 上运行良好,但在 Android 上它有时会调用两次动画,我似乎看不到它被触发两次的模式。
async fadeInBottom() {
let elements = Array.from(document.getElementsByClassName('fadeInBottom'));
const animations = elements.map((el, i) => {
return this.animaitionCtrl.create()
.addElement(el)
.duration(150)
.delay(i * 25)
.fromTo('opacity', 0,1)
.fromTo('transform', 'translateY(30px)', 'none')
.play();
});
await Promise.all(animations)
return true;
}
在页面中调用动画
async ionViewDidEnter() {
await this.animationsService.fadeInBottom();
}
使用“不透明度”时,我有时会在 android 上看到双重动画。我不知道这会成功,但尝试设置
.fadeInBottom{
opacity: 0;
}
将要在 css 文件中设置动画的所有元素作为默认初始值。
除此之外,我宁愿使用@keyframe 在我的 css 文件中制作所有动画,您可以在此处阅读更多相关信息:https : //developer.mozilla.org/es/docs/Web/CSS/@keyframes
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句