vue拼图动画Demo
2020-10-12 03:17
1111 查看
这是一个基于vue的Demo,可以实现拼图动画,但是具体的没有写拼图成功的逻辑,鼠标悬停移动。周期刷新
我把它放到的我的博客园界面上了。刷新界面可以看到。
演示地址
:https://liruilongs.github.io/jigsawPuzzle.github.io/
部分代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>vue.js fifteen puzzle</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="jigsawID" ></div> <script src='vue.min.js'></script> <script src="./script.js"></script> </body> </html>
style.css,
script.js,
*, *:before, *:after { box-sizing: inherit; } .wrapper { position: relative; width: 95vmin; height: 95vmin; max-width: 500px; max-height: 500px; border-radius: 8px; list-style: none; overflow: hidden; padding: 8px; } .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.9); border-radius: 8px; border: 1px solid #000; font-size: 18px; font-family: inherit; cursor: pointer; transition: opacity 0.2s ease, visibility 0s linear; } .overlay-hidden { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 4px; height: 100%; width: 100%; margin: 0; padding: 0; list-style: none; } .item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .button { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 0; border-radi ad0 us: 5px; border: 1px solid Transparent; box-shadow: 0 0 5px #303133; font-size: 18px; font-family: inherit; background: #fff; cursor: pointer; } .button:focus { outline: none; color: #fff; background: #00f; } .button:focus:active { background: #fff; color: inherit; } .button:disabled { color: inherit; cursor: default; } .hidden { visibility: hidden; } .list-move { transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; }
const FIFTEEN = Array.from({ length: 15 }, (e, i) => i + 1); FIFTEEN.push(false); const arraysEqual = (arr1, arr2) => { if (arr1.length !== arr2.length) return false; for (let i = arr1.length; i--;) { if (arr1[i] !== arr2[i]) return false; } return true; }; const isPlayable = (emptyIndex, tileIndex, width) => emptyIndex % width !== 0 && emptyIndex - 1 === tileIndex || emptyIndex % width !== width - 1 && emptyIndex + 1 === tileIndex || emptyIndex - width === tileIndex || emptyIndex + width === tileIndex; const app = document.createElement('div'); document.getElementById("jigsawID").appendChild(app); new Vue({ el: app, data: function () { return { mounted: false, state: [...FIFTEEN] }; }, computed: { completed: function () { return this.mounted && arraysEqual(FIFTEEN, this.state); } }, mounted: function () { this.mounted = true; this.shuffleState(); }, methods: { updateState(i) { const updated = [...this.state]; updated[this.state.indexOf(false)] = this.state[i]; updated[i] = false; this.state = updated; }, shuffleState() { this.state.sort(() => Math.random() - 0.5); } }, render(h) { const empty = this.state.indexOf(false); return h( 'div', { class: 'wrapper' }, [ h( 'transition-group', { class: 'grid', props: { tag: 'ul', name: 'list' } }, this.state.map((num, i) => h( 'li', { class: { 'item': true, 'hidden': !num }, key: num }, [h( 'img', { attrs: { disabled: this.completed || !isPlayable(empty, i, 4) ,src:"./hzw-0"+num+".gif"}, class: 'button', on: !this.completed && isPlayable(empty, i, 4) ? { mouseover: e => { this.updateState(i); e.currentTarget.blur(); } } : {} }, )]))), h( 'button', { attrs: { disabled: !this.completed }, class: { overlay: true, 'overlay-hidden': !this.completed }, on: this.completed ? { mouseover: () => this.shuffleState() } : {} }, 'Congratula 239b tions! Play again?')]); } });
相关文章推荐
- vue通过过渡属性实现游览器下拉动画demo
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
- vue.bootstrap.demo.和vue动画和简单介绍JavaScript数据类型之隐式类型转换
- 【Android 动画】封装好的可滑动指示器indicator,可直接拿来使用(附demo)
- HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画
- Android Studio精彩案例(六)《使用一个Demo涵盖补间动画所有知识》
- VUE入门到实战--Vue多个元素或者组件的过渡动画、列表过度,动画封装
- [Android官方Demo系列] PageTransformer翻转动画
- Vue.js表格增加删除demo
- 【demo练习三】:图片水平滚动、点击按钮变更图片动画
- 用 vue.js 开发微信 app(ios 版) 界面的 demo
- 源码推荐(0622):滚动的电影列表,加入购物车动画用MVVM写的小Demo
- Vue动画事件详解及过渡动画实例
- vue router自动判断左右翻页转场动画效果
- vue——动画,组件的定义
- vue过渡动画的生命周期/钩子函数
- vue过渡动画
- Vue学习【一】环境搭建,demo运行
- vue编程跳转接口push 转场动画
- Fragment,Activity切换动画--Demo