angular - How to animate ionic page/modal to slide in from right
问题描述
I did some research and what I saw is this:
A cordova plugin to get native page transitions but this is only on mobile. https://ionicframework.com/docs/native/native-page-transitions/
If I want to make this work on mobile app and web what is the best option to follow here?
What I want to do is to slide my page and modal from right to the position of the page/modal.
Is this achievable by just using css animations?
解决方案
You can adjust the ionic config to achieve this:
import { IonicModule } from 'ionic-angular';
@NgModule({
...
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
pageTransition: 'ios-transition'
}
}, {}
)],
...
})
see https://ionicframework.com/docs/api/config/Config/ for reference.
For single Page transitions you can use:
import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
}
openModal() {
const modal = this.modalCtrl.create('ContactPage', {}, { enterAnimation: 'modal-slide-in', leaveAnimation: 'modal-slide-out' });
modal.present();
}
openPage() {
this.navCtrl.push('ContactPage', {}, { animation: 'ios-transition' });
}
}
Note: There is no built-in modal transition to slide in from the right but you can define it yourself like described in this forum post: https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/3
推荐阅读
- flutter - 画倒三角形
- java - 使用自定义函数的 Java binarySearch
- c - C11:对类型本身(不是类型的实例)使用`_Generic()`(或其他东西)?
- java - 如何在 Spring WebFlux @ExceptionHandler 中访问 RequestBody?
- c++ - 我正在向 .h 文件添加“模板化非成员函数”。添加以下代码后,为什么我的程序没有输出任何内容:
- elasticsearch - Kubernetes pods 写入持久卷,需要将日志推送到 ElasticSearch
- php - 多维数组的多值搜索未在PHP中返回预期结果
- javascript - 从 Node.js 插件到 JavaScript/WebGL 的最快内存传输
- neo4j - 在阅读 CSV 时,我想将某些行设置为不同的记录类型
- java - 我的 NetBeans java 应用程序如何显示它的构建时间?