vue拼图动画Demo
这是一个基于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-radius: 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() } : {} },
'Congratulations! Play again?')]);
} });
vue拼图动画Demo的更多相关文章
- vue的动画组件（transition）
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
- 一个基于vue的仪表盘demo
最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...
- vue学习指南：第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
随机推荐
- 【Gin-API系列】实现路由分组（七）
在之前的文章介绍中我们已经完成了一个API服务的全链路请求设计.调用方式可以看Test目录的代码 // src/test/request_test.go func TestAPI_Request(t ...
- 被Spring坑了一把，查看源码终于解决了DataFlow部署K8s应用的问题
1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Docker & Kubernetes相关文章:容器技术 基于各种原因,团队的Kubernetes被加了限制,必须在 ...
- 你不得不知的Java基础知识
本篇博客主要记录Java中面向对象的概念和Java语法的基础知识. 面向对象 什么是面向对象 面向对象是一种优秀的软件设计思想,是相对于面向过程.面向切面等设计思想的一种软件设计理念.它的核心思想是运 ...
- 网站远程附件存储到 OSS
参考:链接 链接 链接 简介 网站远程附件功能是指将用户上传的附件直接存储到远端的存储服务器,一般是通过FTP的方式存储到远程的FTP服务器,将论坛附件保存在 OSS 上有以下好处: 附件将拥有更 ...
- CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
- Echars 参数说明
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d ...
- FFmpeg开发笔记（三）：ffmpeg介绍、windows编译以及开发环境搭建
前言 本篇章是对之前windows环境的补充,之前windows的是无需进行编译的,此篇使用源码进行编译,版本就使用3.4.8. FFmpeg简介 FFmpeg是领先的多媒体框架,能够解码 ...
- Hadoop入门学习整理（一）
今天是2020年4月8日,是一个平凡而又特殊的日子,武汉在经历了77天的封城之后,于今日0点正式解封.从1月14日放寒假离开武汉,到今天已近3个月,学校的花开了又谢了.随着疫情好转,春回大地,万物复苏 ...
- Java垃圾回收System.gc()的理解
System.gc()无法保证GC一定执行 在默认情况下,通过System.gc()或者Runtime.getRuntime().gc()的调用,会显式触发Full GC,同时对老年代和新生代进行回收 ...
- 关于java基础_方法的学习
方法: 方法就是把一堆需要反复执行的代码封装起来,如果项目需要调用这段代码时,直接调用方法名即可 方法相当于榨汁机, 材料:水果 产出物:果汁 参数(材料):进入方法的数据 返回值(产出物):就是方法 ...