这是一个基于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的更多相关文章

  1. vue的动画组件（transition）

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  2. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

  5. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue异步组件Demo

    Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...

  7. 一个基于vue的仪表盘demo

    最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...

  8. vue学习指南：第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  9. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

随机推荐

  1. python好用的测试库-Nose

    前序: python除了unittest,还有一款更快捷的nose,nose可以说是对unittest的一种简化吧,但是他不需要unittest那种必须有固有的格式,他只需要文件,类名,方法名等含有t ...

  2. Ignatius and the Princess IV （水题）

    "OK, you are not too bad, em... But you can never pass the next test." feng5166 says.  &qu ...

  3. Java进阶专题(十三) 从电商系统角度研究多线程(上)

    前言 ​ 本章节主要分享下,多线程并发在电商系统下的应用.主要从以下几个方面深入:线程相关的基础理论和工具.多线程程序下的性能调优和电商场景下多线程的使用. 多线程J·U·C 线程池 概念 回顾线程创 ...

  4. Vue-router的用法与使用步骤

    Vue-router的使用步骤: Vue Router的使用步骤还是比较清晰的,按照步骤一步一步就能完成路由操作 A.导入js文件 B.添加路由链接 C.添加路由占位符(最后路由展示的组件就会在占位符 ...

  5. 在Python程序中执行linux命令

    import commands print commands.getstatusoutput('ls') 输出: (0, '1.py\nwork.nfs') 参考文档: https://blog.cs ...

  6. 三年前买的T440p目前淘宝二手价2300左右

    当时可是近六千买的,唉... 有消息说六千多电脑和四千多的区别是多了OEM Windows的价钱,如果一重装,等于把差价抹了... 看来买电脑,买车,买手机都该秉承一个够用就好的原则,不然当时的顶配不 ...

  7. Java实现获取命令行中获取指定数据

    执行ipconfig /all获取主机所有网卡信息并分析这些字符串,提取出有效网卡(网卡名称,mac地址,ipv4地址,掩码,网关,dns)将网卡插入HashMap中,key是网卡的名称,value是 ...

  8. OKR工作法

    OKR 目标与关键成果 [Objectives and Key Results] OKR是目标管理工具,它的价值不在于是否完成OKR,而在于呈现出团队最应该关注的事情,通过持续性的沟通确保每个人都聚焦 ...

  9. magento首页

    访问首页的时候,路径时没有的,magneto会获取站点的默认路径Mage_Core_Controller_Varien_Router_Standard::match if ($path) {      ...

  10. Vant IndexBar 在小程序中的简单使用

    这篇文章是老王的朋友超超提供的,上午已经更新到原创微信公众号「软件老王」,链接,欢迎各位朋友关注老王的原创公号! 先看下最终效果图,主要是渲染一个A - Z 的 通讯录.同样的,如果你要做的是城市列表 ...