Question

离子模态带有slide-in-up的标准动画。我们是否可以将动画更改为fade-in？

Answer 1

为Ionic Modal添加自定义过渡我们将使用Ionic Modal Options enterAnimation和leaveAnimationfrom ModalOptions界面。对于模态，有过渡状态：当我们关闭模态时，输入模态和模态的休假。如果你看一下Ionic Modal选项界面，你会发现两个选项来为这两种状态添加动画。

export interface ModalOptions {
    showBackdrop?: boolean;
    enableBackdropDismiss?: boolean;
    enterAnimation?: string;
    leaveAnimation?: string;
    cssClass?: string;
}

我们将在模态中使用这些选项来指定我们使用ionic-angular中的Animation类创建的过渡类。因此，让我们一步一步了解我们如何创建和自定义动画。

为进入和离开创建2个过渡类：

在输入-translate.transition.ts

import { Animation, PageTransition } from 'ionic-angular'; export class ModalTranslateEnterTransition extends PageTransition { public init() { const ele = this.enteringView.pageRef().nativeElement; const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper')); wrapper.beforeStyles({ 'transform': 'translateX(100%);', 'opacity': 1 }); wrapper.fromTo('transform', 'translateX(100%)', 'translateX(0)'); wrapper.fromTo('opacity', 1, 1); this .element(this.enteringView.pageRef()) .duration(500) .easing('cubic-bezier(.1, .7, .1, 1)') .add(wrapper); } }

在-离开-translate.transition.ts

import { Animation, PageTransition } from 'ionic-angular'; export class ModalTranslateLeaveTransition extends PageTransition { public init() { const ele = this.leavingView.pageRef().nativeElement; const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper')); const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper')); wrapper.beforeStyles({ 'transform': 'translateX(100%)', 'opacity': 1 }); wrapper.fromTo('transform', 'translateX(0)', 'translateX(100%)'); wrapper.fromTo('opacity', 1, 1); contentWrapper.fromTo('opacity', 1, 0); this .element(this.leavingView.pageRef()) .duration(500) .easing('cubic-bezier(.1, .7, .1, 1)') .add(contentWrapper) .add(wrapper); } }

然后在 app.module.ts
中导入这些模块
export class AppModule { constructor(public config: Config) { this.setCustomTransitions(); } private setCustomTransitions() { this.config.setTransition('modal-translate-up-enter', ModalTranslateEnterTransition); this.config.setTransition('modal-translate-up-leave', ModalTranslateLeaveTransition); } }

使用以下选项创建模态：

var modal = this.modalCtrl.create(AddToCartModalPage, { productId: this.productId, skuId: this.skuId, zipcode: this.zipcode, sellerProfileId: this.sellerProfileId, branchId: this.branchId, changeSeller: this.changeSeller }, { showBackdrop: false, enableBackdropDismiss: false, cssClass: 'add-to-cart-modal', enterAnimation: 'modal-translate-up-enter', leaveAnimation: 'modal-translate-up-leave' });

在此处查找我的文章的更多信息： Blog

在此处查找完整的演示存储库： Github

Answer 2

您可以添加自己的动画css，例如：

.slide-in-right {
  -webkit-transform: translateX(100%);
    transform: translateX(100%); }

.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; }

.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
  -webkit-transform: translateX(0);
    transform: translateX(0); }

.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
  transition: all ease-in-out 250ms; }

并使用＆＃39; slide-in-right＆＃39;

淡入＆＃39;

https://forum.ionicframework.com/t/slide-in-right-animation-for-ionicmodal/18882

Answer 3

没有离子不提供淡入动画。但是你可以使用animate.css

来做到这一点

Answer 4

您可以使用此开源中的ready动画：

Ionic v3 here的模态/ Popover过渡类

Answer 5

 @Published var allDurations:[Double] = [20,50,100,110,1000]

创建一个新文件名。ts 复制并粘贴这个...然后只将此文件导入到您将创建模态的组件中。 import { leaveToRightAnimation,enterFromRightAnimation} from 'filename'; 无需导入模块
然后设置模态选项 enterAnimation: enterFromRightAnimation, leaveAnimation: leaveToRightAnimation

离子自定义模态动画

5 个答案: