ionic2实战-自定义对话框动画

前言

• 之前在这里绍了自定义Ionic Modal动画，本节介绍自定义modal dialog（模态对话框）动画
• 两者区别：Ionic Modal是一个页面，定义页面的入场出场动画，modal dialog是页面中的代码片段，定义这个片段的显示隐藏动画

效果演示

动画源码

https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/shared/modal-dialog-animation/modal-dialog-animation.ts

在线预览

https://yanxiaojun617.com/ionic2_tabs/

实操

• 安装动画依赖

npm i @angular/[email protected]  

ionic项目默认没有安装@angular/animations，请检查你项目的package.json是否存在，没有则安装，版本号和@angular/core版本一致，如下图

• 在app.module.ts导入BrowserAnimationsModule,如下图
  

• 创建一个组件放在shared目录下，用于定义动画
  

注意：创建公共的组件，需要exports，这个很容易忘记

• 动画代码很简单，我这里不解释了，简单的前提是你看了看官网文档，只用看如下图两小节即可
  

使用

• 先在要使用的模块导入自定义的动画模块ModalDialogAnimationPageModule
  

• 页面调用
  使用page-modal-dialog-animation标签调用动画组件，属性参数isShow用于控制动画的显示/隐藏，标签内容就是对话框内容，内容自己定义，组件只提供显示/隐藏的动画效果
  

动画在Safari不起作用

听说在angular6+没有此问题

• 添加web-animations-js
  npm install web-animations-js --save
• 在动画组件导入web-animations-js，如下图
  import 'web-animations-js/web-animations.min';
  

最后

• 我在动画组件(modal-dialog-animation.ts)中定义了两个进场动画，实际只是用了一个，这里只是为了演示