这是一个基于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. 【转】Android DrawingCache

    转自:http://magiclen.org/android-drawingcache/ 日期: 2014 年 8 月 27 日 | 作者: Magic Len 開發Android的時候,在許多情況下 ...

  2. springboot x.x.x RELEASE pom 第一行报错解决办法

    springboot x.x.x RELEASE pom 第一行报错解决办法 在pom.xml 文件的properties中加入maven jar插件的版本号 <properties> & ...

  3. 20190925-05Redis五大数据类型之String 000 026

  4. Eclipse获取工作空间跟运行空间

    System.out.println(System.getProperty("user.dir"));//当前工作空间 System.out.println(Platform.ge ...

  5. leetcode刷题-55跳跃游戏

    题目 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 思路 贪心算法:记录每一个位置能够跳跃到的最远距离,如果 ...

  6. 【小白学PyTorch】9 tensor数据结构与存储结构

    文章来自微信公众号[机器学习炼丹术]. 上一节课,讲解了MNIST图像分类的一个小实战,现在我们继续深入学习一下pytorch的一些有的没的的小知识来作为只是储备. 参考目录: @ 目录 1 pyto ...

  7. Scrapy框架的架构原理解析

    爬虫框架--Scrapy 如果你对爬虫的基础知识有了一定了解的话,那么是时候该了解一下爬虫框架了.那么为什么要使用爬虫框架? 学习框架的根本是学习一种编程思想,而不应该仅仅局限于是如何使用它.从了解到 ...

  8. PHP学习路线图（转）

    PHP学习路线图 在网上很多人公布了太多的PHP学习路线图,本人在互联网公司工作十余年,也带了很多PHP入门的新手,将他们的一些问题和学习路线图为大家整理出来,希望很多小白少走弯路. 一. 网上某些错 ...

  9. 软件定义网络（SDN）第二次实验报告

    目录 实验 2 :Mininet 实验--拓扑的命令脚本生成 一.实验目的 二.实验任务 三.实验要求 四.具体实验步骤 引导实验 Part 1 引导实验 Part 2 本周实验任务完成流程 五.注意 ...

  10. Python实现拆分多级目录的方式

    1 环境 操作系统:Windows10 Python版本:Python3.7 2 简介 实现多级目录差分,举例说明如下: 假设现有的目录结构如下:1.2.2.1.2.2.2.3.2.4.3.4.5.6 ...