Ionic 4 动画对象

Question

我想为我的IonModal 输入和离开设置动画，并且有 获取动画对象的enterAnimation 和leaveAnimation 属性。

我使用 ionic/react。 所以我的动画导入甚至不起作用！这个异常出来了：Attempted import error: 'Animation' is not exported from '@ionic/core'.

我看到的这个对象的唯一例子是： https://www.joshmorony.com/create-a-custom-modal-page-transition-animation-in-ionic/

我只想更改模态进入/离开的一侧，而这段代码对它来说不是那么可预测的。

一些很好的例子如何将它与 react 一起使用？

Answer 1

为您的应用程序使用Ionic Native Page Transitions。我相信它会在 enter 和 leave 动画方面做你想做的事。这方面的文档也相当充足。

Answer 2

下面是一个模态动画示例，类似于joshmorony 提出的第一个示例，在 ionic 4/5/6 中使用 angular。

src/app/animations/enter.ts

import { Animation, createAnimation } from '@ionic/angular';

export const modalEnterAnimation = (
    baseEl: HTMLElement,
    presentingEl?: HTMLElement,
  ): Animation => {

  const backdropAnimation = createAnimation()
    .addElement(baseEl.querySelector('ion-backdrop')!)
    // .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
    .beforeStyles({
      'pointer-events': 'none'
    })
    .afterClearStyles(['pointer-events']);

  const wrapperAnimation = createAnimation()
    .addElement(baseEl.querySelectorAll('.modal-wrapper, .modal-shadow')!)
    .beforeStyles({ 'opacity': 1 })
    .keyframes([
        { offset: 0, transform: 'translateX(100vh)' },
        { offset: 1, transform: 'translateX(0vh)'},
      ]);

  const baseAnimation = createAnimation()
    .addElement(baseEl)
    .easing('ease-out')
    .duration(300)
    .addAnimation([wrapperAnimation, backdropAnimation]);

  return baseAnimation;

};

src/app/animations/leave.ts

import { Animation, createAnimation } from '@ionic/angular';

export const modalLeaveAnimation = (
    baseEl: HTMLElement,
    presentingEl?: HTMLElement,
  ): Animation => {

  const backdropAnimation = createAnimation()
    .addElement(baseEl.querySelector('ion-backdrop')!)
    // .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
    .beforeStyles({
      'pointer-events': 'none'
    })
    .afterClearStyles(['pointer-events']);

  const wrapperAnimation = createAnimation()
    .addElement(baseEl.querySelectorAll('.modal-wrapper')!)
    .beforeStyles({ 'opacity': 1 })
    .keyframes([
        { offset: 0, transform: 'translateX(0vh)' },
        { offset: 1, transform: 'translateX(100vh)'},
      ]);

  const baseAnimation = createAnimation()
    .addElement(baseEl)
    .easing('ease-out')
    .duration(300)
    .addAnimation([wrapperAnimation, backdropAnimation]);

  return baseAnimation;
  
};