vxe-table/packages/ui/src/anime.ts

A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.

import XEUtils from 'xe-utils'
import { addClass, removeClass } from './dom'

const rowMoveCls = 'row--drag-move'
const colMoveClass = 'col--drag-move'

/**
 * 上下拖拽
 */
export function moveRowAnimateToTb (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetTop: number) {
  XEUtils.arrayEach(elemList, trEl => {
    trEl.style.transform = `translateY(${offsetTop}px)`
  })
  requestAnimationFrame(() => {
    XEUtils.arrayEach(elemList, trEl => {
      addClass(trEl, rowMoveCls)
      trEl.style.transform = ''
    })
  })
}

export function clearRowAnimate (elem: HTMLElement | undefined, clss: string[]) {
  setTimeout(() => {
    if (elem) {
      XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls))
    }
  }, 500)
}

/**
 * 左右拖拽
 */
export function moveColAnimateToLr (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetLeft: number) {
  XEUtils.arrayEach(elemList, trEl => {
    trEl.style.transform = `translateX(${offsetLeft}px)`
  })
  requestAnimationFrame(() => {
    XEUtils.arrayEach(elemList, trEl => {
      addClass(trEl, colMoveClass)
      trEl.style.transform = ''
    })
  })
}

export function clearColAnimate (elem: HTMLElement | undefined, clss: string[]) {
  setTimeout(() => {
    if (elem) {
      XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, colMoveClass))
    }
  }, 500)
}