这是一个基于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. day48:django前戏之HTTP协议&自定义web框架

    目录 1.HTTP协议 1.HTTP协议简介 2.HTTP协议概述 3.HTTP协议工作原理 4.HTTP协议请求方法 5.HTTP协议状态码 6.URL 7.HTTP请求格式 8.HTTP响应格式 ...

  2. matplotlib | Python强大的作图工具，让你从此驾驭图表

    今天是数据处理专题的第9篇文章,在之前的8篇文章当中我们已经介绍完了pandas这个库的一些基本用法,我们先把一些冷门的高级用法放一放,先来给大家介绍一下另外一个很有用的数据分析库--matplotl ...

  3. 添加到web.config文件里的用户自定义翻页控件

    <pages> <controls> <add tagPrefix="ucl" tagName="Pager_Backstage" ...

  4. 藏在Java数组的背后，你可能忽略的知识点

    目录 引言 概念 区别于C/C++数组 区别于容器 数组特性 随机访问 Java数组与内存 解惑 数组的本质 Java中的数组是对象吗? Java中数组的类型 Java中数组的继承关系 参考资料 引言 ...

  5. Solr专题（一）手把手教你搭建Solr服务

    一.Solr是什么,能解决什么问题? Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对 ...

  6. iptables防火墙说明即使用

    防火墙是架设在公网和私网之间的服务器,隔离公网和私网,保护私网. RHEL7默认使用firewalld作为防火墙. 但firewalld底层还是调用包过滤防火墙iptables #systemctl ...

  7. 安装模块中出现的问题：不是内部或外部命令、pip 命令不存在、Unknown or unsupported command 'install'

    #cmd下python.pip不是内部或外部命令——表示环境变量没有加# path中新增1.python的安装目录# 2.python下scripts的目录 #提示 pip 命令不存在——表示环境变量 ...

  8. PHP基础之面向对象篇

    前言 前面写的都是运算符.流程控制.排序查找等,下面说一说面向对象的一些内容.这是前面写的,有兴趣可以去看一看. PHP入门之类型与运算符 PHP入门之流程控制 PHP入门之函数 PHP入门之数组 P ...

  9. hystrix文档翻译之Dashboard

    Dashboard Hystrix Dashboard可以让你实时监控hystrix的metrics信息. 当netflix开始使用dashboard后,运维效率得到了极大的提升,并且极大降低了大多数 ...

  10. MySql基础_DDL_DML_DQL(资料一)

    今日内容 数据库的基本概念 MySQL数据库软件 安装 卸载 配置 SQL 数据库的基本概念 1. 数据库的英文单词: DataBase 简称 : DB 2. 什么数据库? * 用于存储和管理数据的仓 ...