iportal/src/Transform/animation/preset/flip.ts

web-portal

import { TransformAnimateEvent } from '../../../types'

export default (type: number) => {
  return async (e: TransformAnimateEvent): Promise<boolean> => {
    return new Promise(async (resolve) => {
      let origin = 'center'
      let minScale = 0.3
      let rotate = 150
      let duration = 1300
      let inDelay = duration / 4
      let rx = 0
      let ry = 1
      const direction = e.direction * e.historyDirection
      switch (type) {
        case 0:
          origin = 'top'
          rx = 1
          ry = 0
          duration = 1600
          inDelay = duration / 4
          break
        case 1:
          origin = 'right'
          break
        case 2:
          origin = 'bottom'
          rx = 1
          ry = 0
          duration = 1600
          inDelay = duration / 4
          break
        case 3:
          origin = 'left'
          break
        case 4:
          origin = 'center'
          rotate = 90
          minScale = 0.9
          duration = 600
          inDelay = duration
          break
      }
      await e.in.duration(0).ease('ease-out-expo').perspective(1000).origin(origin).to(0, 0, 0).backface(false).opacity(1).rotate3d(rx, ry, 0, rotate * direction).scale(minScale).end()
      e.in.delay(inDelay).duration(duration).rotate3d(rx, ry, 0, 0).scale(1).end(() => {
        resolve(false)
      })
      e.out.duration(duration).ease('ease-out-expo').perspective(1000).origin(origin).backface(false).rotate3d(rx, ry, 0, -rotate * direction).scale(minScale).end(() => {
        e.out.duration(0).rotate3d(rx, ry, 0, -rotate * direction).opacity(0).end()
      })
      setTimeout(() => {
        resolve(false)
      }, 2000)
    })
  }
}