Skip to content

Commit 0212521

Browse files
committed
add move animation example
1 parent 8b46747 commit 0212521

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed

examples/move-animations/index.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Move Animations</title>
6+
<style>
7+
.container {
8+
position: relative;
9+
padding: 0;
10+
}
11+
.item {
12+
width: 100%;
13+
height: 30px;
14+
background-color: #f3f3f3;
15+
border: 1px solid #666;
16+
box-sizing: border-box;
17+
}
18+
.fade-move, .fade-enter-active, .fade-leave-active {
19+
transition: all .5s cubic-bezier(.55,0,.1,1);
20+
}
21+
.fade-enter {
22+
opacity: 0;
23+
transform: scaleY(0) translate(30px, 0);
24+
}
25+
.fade-leave-active {
26+
position: absolute;
27+
opacity: 0;
28+
transform: scaleY(0.01) translate(30px, 0);
29+
}
30+
</style>
31+
<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
32+
<script src="../../dist/vue.js"></script>
33+
</head>
34+
<body>
35+
<div id="el">
36+
<button @click="insert">insert at random index</button>
37+
<button @click="reset">reset</button>
38+
<button @click="shuffle">shuffle</button>
39+
<transition-group tag="ul" name="fade" class="container">
40+
<item v-for="item in items"
41+
class="item"
42+
:msg="item"
43+
:key="item"
44+
@rm="remove(item)">
45+
</item>
46+
</transition-group>
47+
</div>
48+
49+
<script>
50+
var items = [1, 2, 3, 4, 5]
51+
var id = items.length + 1
52+
53+
var vm = new Vue({
54+
el: '#el',
55+
data: {
56+
items: items
57+
},
58+
components: {
59+
item: {
60+
props: ['msg'],
61+
template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
62+
}
63+
},
64+
methods: {
65+
insert () {
66+
var i = Math.round(Math.random() * this.items.length)
67+
this.items.splice(i, 0, id++)
68+
},
69+
reset () {
70+
this.items = [1, 2, 3, 4, 5]
71+
},
72+
shuffle () {
73+
this.items = _.shuffle(this.items)
74+
},
75+
remove (item) {
76+
var i = this.items.indexOf(item)
77+
if (i > -1) {
78+
this.items.splice(i, 1)
79+
}
80+
}
81+
}
82+
})
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)