这是一个基于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. 面试【JAVA基础】多线程

    本次整理的内容如下: 1.进程与线程的区别 进程是一个可执行的程序,是系统资源分配的基本单位:线程是进程内相对独立的可执行单元,是操作系统进行任务调度的基本单位. 2.进程间的通信方式 2.1.操作系 ...

  2. Agumaster 增加雪球网爬虫

  3. origin Tips

    origin Tips 注意事项 在最初画图时,需要考虑到最好将图片的尺寸限制在 1 张 A4 纸的大小,不然有可能在插入 latex 的时候出问题 . 如何修改图片的尺寸?简而言之就是将画布中的图片 ...

  4. List和Dictionary的使用技巧总结

    List和Dictionary想必是我们平常用到最多的C#容器了,他们使用起来都很简单,所以很多人就可能就没去深究,其实在使用过程中有很多的小技巧能让我们写的代码变得更高效也更安全. 1·合理的指定初 ...

  5. EAM在不同行业的应用

    EAM在不同行业的应用 EAM从出现至今,已让很多资产密集型企业受益,甚至在一些行业领域里已经是公认的.不可或缺的管理方案,比如电力行业.轨道交通行业等.但由于不同行业或者企业业务类型不同,导致了资产 ...

  6. Flutter学习六之实现一个带筛选的列表页面

    上期实现了一个网络轮播图的效果,自定义了一个轮播图组件,继承自StatefulWidget,我们知道Flutter中并没有像Android中activity的概念.页面见的跳转是通过路由从一个全屏组件 ...

  7. Nginx【常见知识点速查】

    文章更新时间:2020/04/10 一.简介 定义:Nginx是一个高性能的HTTP和反向代理web服务器 作用: 反向代理 正向代理 负载均衡 HTTP静态资源服务器(动静分离) 二.正向代理与反向 ...

  8. 深入理解HBase

    深入理解HBase: https://www.jianshu.com/p/b23800d9b227

  9. MySQL中的临时表到底什么是?

    Author:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! CSDN@极客小俊,原创文章, B站技术分享 B站视频 : Bilibili.c ...

  10. Spark 模型选择和调参

    Spark - ML Tuning 官方文档:https://spark.apache.org/docs/2.2.0/ml-tuning.html 这一章节主要讲述如何通过使用MLlib的工具来调试模 ...