使用Vue2.js实现的矩阵排序动画

Vue2 List Transitions

vue, underscore

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5266
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

new Vue({
    el: '#app',
    data: {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    methods: {
        shuffle: function shuffle() {
            this.items = _.shuffle(this.items);
        },
        forwards: function forwards() {
            var forwardArray = [];
            for (var i = 0; i < this.items.length; i++) {
                if (i === 0) {
                    forwardArray.push(this.items[this.items.length - 1]);
                } else {
                    forwardArray.push(this.items[i - 1]);
                }
            }

this.items = forwardArray;
        },
        backwards: function backwards() {
            var backwardArray = [];
            for (var i = 0; i < this.items.length; i++) {
                if (i === 8) {
                    backwardArray.push(this.items[0]);
                } else {
                    backwardArray.push(this.items[i + 1]);
                }
            }

this.items = backwardArray;
        },
        reverse: function reverse() {
            this.items = this.items.reverse();
        },
        x: function x() {
            var temp = this.items[0],
                temp2 = this.items[2],
                xArray = [];

//This is really really weird
            for (var i = 0; i < this.items.length; i++) {
                switch (i) {
                    case 0:
                        xArray.push(this.items[8]);
                        break;
                    case 2:
                        xArray.push(this.items[6]);
                        break;
                    case 6:
                        xArray.push(this.items[2]);
                        break;
                    case 8:
                        xArray.push(this.items[0]);
                        break;
                    default:
                        xArray.push(this.items[i]);
                        break;
                }
            }
            console.log(xArray);

this.items = xArray;
        }
    }
});

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Nunito");
body,
html {
    height: 100%;
    width: 100%;
    background: #C0392B;
    font-family: 'Nunito', sans-serif;
}
button {
    margin: 3px;
    width: 100px;
    height: 50px;
    color: white;
    background: #1378E4;
    opacity: 1;
    border: 2px solid white;
    font-size: 14px;
    opacity: .9;
    border-radius: 10%;
}
h1 {
    text-align: center;
    color: white;
}
#app {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
}
#boxcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
    width: 250px;
}
#buttoncontainer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}
.item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    background: #FFC300;
    border: 2px solid white;
    margin: 2px;
}
.item-list-move {
    transition: transform 1s;
}

HTML

Vue2 List Transitions

vue, underscore

编辑器支持Emmet

快捷键

Vue2 List Transitions

vue, underscore

使用Vue.js实现的待办事项列表应用程序

使用CKEditor v4和Vue.js v2实现的富文本编辑器实例代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：