JSFiddle - React, Tailwind, and code Playground

by acccco

HTML

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/matrixchange@1/dist/matrixChange.js"></script>
<div id="app"></div>

CSS

html,
body,
#app {
  height: 100%;
  width: 100%;
}

* {
  padding: 0;
  margin: 0;
}

JavaScript

var app = document.getElementById('app')
var urls = [
'http://bgcdn.acohome.cn/100965.jpg',
  'http://bgcdn.acohome.cn/1501505.jpg',
  'http://bgcdn.acohome.cn/1501655.jpg',
  'http://bgcdn.acohome.cn/286477.jpg',
  'http://bgcdn.acohome.cn/328845.jpg'
]

var move = mChange.makeMatrixChange(app, {
  images: urls,
  row: 7,
  col: 9
})

function getRandom(min, max) {
  return Math.round(Math.random() * (max - min)) + min
}

move.movePoint(mChange.mode[0])

app.addEventListener('click', function() {
  move.movePoint(mChange.mode[getRandom(0, mChange.mode.length - 1)], {
    animate: true,
    // 可以改成其他 animate.css 的动画
    classNameIn: 'animated flipInX',
    classNameOut: 'animated flipOutX'
  })
})