ionic2实战-自定义对话框动画
2018-11-09 本文已影响302人
昵称已被使用_
前言
- 之前在这里绍了自定义Ionic Modal动画，本节介绍自定义modal dialog（模态对话框）动画
- 两者区别：Ionic Modal是一个页面，定义页面的入场出场动画，modal dialog是页面中的代码片段，定义这个片段的显示隐藏动画
效果演示
动画源码
在线预览
https://yanxiaojun617.com/ionic2_tabs/
实操
- 安装动画依赖
npm i @angular/animations@4.4.4
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)中定义了两个进场动画，实际只是用了一个，这里只是为了演示
