limichange / flyball

flyball 🏀~~

flyball

Create flyball animation so easy 👍

Install

$ npm i flyball --save
# or
$ yarn add flyball

Usage

import flyball from 'flyball'
import 'flyball/dist/flyball.css'

Dom

const from = document.getElementById('from')
const to = document.getElementById('to')

flyball(from, to)

Position

const from = { top: 0, left: 100 }
const to = { top: 100, left: 0 }

flyball(from, to)

Position and dom

const from = { top: 0, left: 100 }
const to = document.getElementById('to')

flyball(from, to)

Development

$ npm run dev

Contributing

• Fork it! 😆
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a PR 🍻

Author

MIT @ Limichange

flyball's Issues

WIP

function createIcon () {
  const iconDiv = document.createElement('div')
  iconDiv.classList.add('add1Icon')
  document.body.appendChild(iconDiv)
  console.info(iconDiv.clientHeight)
  iconDiv.classList.add('active')
  setTimeout(() => {
    document.body.removeChild(iconDiv)
  }, 2000)
  return iconDiv
}

function getScale () {
  let i = 1
  const viewport = document.querySelector('meta[name="viewport"]')

  if (viewport) {
    const scale = viewport.content.match(/initial-scale=(\d+\.?\d*)/)
    scale && (i = scale[1])
  }

  return i
}

export default function (t, e) {
  if (!e || !t.currentTarget) {
    return Promise.reject(new Error('no params'))
  }

  if (void 0 === e.left || void 0 === e.top) {
    return Promise.reject(new Error('no position'))
  }

  const i = getScale()
  const a = 9 / parseFloat(i)
  const r = t.currentTarget.getBoundingClientRect()
  const s = e
  const flyball = document.createElement('div')
  const inner = document.createElement('div')

  flyball.classList.add('flyball')
  inner.classList.add('inner')
  inner.style.width = 2 * a + 'px'
  inner.style.height = 2 * a + 'px'
  flyball.style.top = r.top + 'px'
  flyball.style.left = r.left + 'px'
  flyball.appendChild(inner)

  document.body.appendChild(flyball)

  const targetPosition = {
    top: s.top - r.top,
    left: s.left - r.left
  }

  console.info(flyball.clientHeight)

  const prefixs = ['-webkit-', '-moz-', '-ms-', '-o-', '']

  prefixs.forEach(function (n) {
    flyball.style.setProperty(n + 'transform', 'translate3d(' + targetPosition.left + 'px, 0, 0)')
    inner.style.setProperty(n + 'transform', 'translate3d(0 ,' + targetPosition.top + 'px, 0)')
  })

  createIcon()

  return new Promise(function (resolve) {
    inner.addEventListener('transitionend', function () {
      document.body.removeChild(flyball)
      resolve(true)
    })
  })
}