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

web-portal

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

export default (type: number) => {
  return (e: TransformAnimateEvent) => {
    let inX = 0
    let outX = 0
    let inY = 0
    let outY = 0

    switch (type) {
      case 0:
        outY = e.height
        inY = -outY
        inX = outX = 0
        break
      case 1:
        inX = e.width
        outX = -inX
        inY = outY = 0
        break
      case 2:
        inY = e.height
        outY = -inY
        inX = outX = 0
        break
      case 3:
        outX = e.width
        inX = -outX
        inY = outY = 0
        break
    }

    if (e.reverse) {
      e.in.duration(0).filter('brightness(0.5)').to(inX * .1, inY * .1, 0).end(() => {
        e.out.duration(767).ease('ease-out-expo').to(outX, outY, 0).end()
        e.in.duration(767).ease('ease-out-expo').filter('brightness(1)').to(0, 0, 0).end(() => {
          e.callback(false)
        })
      })
    } else {
      e.in.duration(0).to(inX, inY, 0).end(() => {
        e.in.duration(767).ease('ease-out-expo').to(0, 0, 0).end(() => {
          e.callback(false)
        })
        e.out.duration(767).ease('ease-out-expo').filter('brightness(0.5)').to(outX * .5, outY * .5, 0).end()
      })
    }

    setTimeout(() => {
      e.callback(false)
    }, 1200)
  }
}