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 = [
  'https://w.wallhaven.cc/full/zy/wallhaven-zy2x7v.png',
  'https://w.wallhaven.cc/full/ex/wallhaven-exrqrr.jpg',
  'https://w.wallhaven.cc/full/85/wallhaven-8586my.png'
]

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'
  })
})