这是一个基于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. Just an Old Puzzle(2019多校1007)

    Problem Description You are given a 4 × 4 grid, which consists of 15 number cells and an empty cell. ...

  2. Java 与 Mysql连接，并分页显示

    这是我第一个上规模的Java项目,我们必须在一周内完成的作业,零基础学习Java,网上收集了很多资料,逐渐对面向对象的思想有所了解,但还是半灌水,后期打算结合项目系统地学习一遍Java.老师布置的任务 ...

  3. vue bus 中央事件总线

    1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() //  全局引入mai.jsvue中央事件总 ...

  4. MyBatis的逆向工程、Example类

    public void testFindUserByName(){ //通过criteria构造查询条件 UserExample userExample = new UserExample(); us ...

  5. Nginx及其架构设计

    1.1. 什么是 Nginx Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器,Nginx,它的发音为“engine X”,是一个高性能的HTTP和反向代理服务器,同时也是一个 IMAP/P ...

  6. yum wget rpm

    wget 类似于迅雷,是一种下载工具          下载安装包 yum: 是redhat, centos 系统下的软件安装方式 下载安装包并自动安装 以及一些依赖关系 基于RPM包管理,能够从指定 ...

  7. flag在index里

    题目:http://123.206.87.240:8005/post/ 我们来看这一题 首先打开题目 他让点击就点击呗 跳转到另一个新的界面 这就没了??? ... 没思路就对了    //假装证明自 ...

  8. Salesforce LWC学习(二十五) Jest Test

    本篇参看: https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components https://j ...

  9. python之map

    python之Map函数   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 # map()函数使用举例 # 功能: ...

  10. 吴恩达《深度学习》-第五门课 序列模型(Sequence Models)-第三周 序列模型和注意力机制（Sequence models & Attention mechanism）-课程笔记

    第三周 序列模型和注意力机制(Sequence models & Attention mechanism) 3.1 序列结构的各种序列(Various sequence to sequence ...