|
|
@@ -0,0 +1,85 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>Move Animations</title>
|
|
|
+ <style>
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border: 1px solid #666;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .fade-move, .fade-enter-active, .fade-leave-active {
|
|
|
+ transition: all .5s cubic-bezier(.55,0,.1,1);
|
|
|
+ }
|
|
|
+ .fade-enter {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scaleY(0) translate(30px, 0);
|
|
|
+ }
|
|
|
+ .fade-leave-active {
|
|
|
+ position: absolute;
|
|
|
+ opacity: 0;
|
|
|
+ transform: scaleY(0.01) translate(30px, 0);
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
|
|
|
+ <script src="../../dist/vue.js"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="el">
|
|
|
+ <button @click="insert">insert at random index</button>
|
|
|
+ <button @click="reset">reset</button>
|
|
|
+ <button @click="shuffle">shuffle</button>
|
|
|
+ <transition-group tag="ul" name="fade" class="container">
|
|
|
+ <item v-for="item in items"
|
|
|
+ class="item"
|
|
|
+ :msg="item"
|
|
|
+ :key="item"
|
|
|
+ @rm="remove(item)">
|
|
|
+ </item>
|
|
|
+ </transition-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var items = [1, 2, 3, 4, 5]
|
|
|
+ var id = items.length + 1
|
|
|
+
|
|
|
+ var vm = new Vue({
|
|
|
+ el: '#el',
|
|
|
+ data: {
|
|
|
+ items: items
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ item: {
|
|
|
+ props: ['msg'],
|
|
|
+ template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ insert () {
|
|
|
+ var i = Math.round(Math.random() * this.items.length)
|
|
|
+ this.items.splice(i, 0, id++)
|
|
|
+ },
|
|
|
+ reset () {
|
|
|
+ this.items = [1, 2, 3, 4, 5]
|
|
|
+ },
|
|
|
+ shuffle () {
|
|
|
+ this.items = _.shuffle(this.items)
|
|
|
+ },
|
|
|
+ remove (item) {
|
|
|
+ var i = this.items.indexOf(item)
|
|
|
+ if (i > -1) {
|
|
|
+ this.items.splice(i, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Evan You