Skip to content

Commit ca10309

Browse files
committed
Update example to support transition and stagger
1 parent a6aa71d commit ca10309

File tree

1 file changed

+14
-7
lines changed

1 file changed

+14
-7
lines changed

example/index.html

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,33 +19,40 @@
1919
border-top: 1px solid #fff;
2020
border-bottom: 1px solid #e3e3e3;
2121
}
22+
.example-list-item.bounce-transition{
23+
transition: all .3s;
24+
opacity: 1;
25+
}
26+
.example-list-item.bounce-enter, .example-list-item.bounce-leave{
27+
opacity: 0;
28+
transform: translateX(20px);
29+
}
2230
.example-list-item:before{
2331
content: 'Line: ';
2432
}
2533
</style>
2634
</head>
2735
<body>
2836
<div id="app">
29-
<p class="example-list-item" v-for="item in list" v-text="item"></p>
30-
<infinite-loading :on-infinite="onInfinite" :distance="distance" v-if="list.length < 300"></infinite-loading>
37+
<p class="example-list-item" v-for="item in list" v-text="item" transition="bounce" stagger="100"></p>
38+
<infinite-loading :on-infinite="onInfinite" :distance="distance" v-if="list.length < 300" :transition="bounce" :stagger-count="list.length"></infinite-loading>
3139
</div>
3240
<script>
3341
new Vue({
3442
el: '#app',
3543
data: {
3644
distance: 100,
37-
list: []
45+
list: [],
46+
bounce: null,
3847
},
3948
ready: function () {
40-
for (var i = 0; i < 50; i++) {
41-
this.list.push(i + 1);
42-
}
49+
this.bounce = this.$options.transitions.bounce = { type: 'transition' };
4350
},
4451
methods: {
4552
onInfinite: function () {
4653
setTimeout(function () {
4754
var temp = [];
48-
for (var i = this.list.length; i <= this.list.length + 20; i++) {
55+
for (var i = this.list.length; i <= this.list.length + 30; i++) {
4956
temp.push(i);
5057
}
5158

0 commit comments

Comments
 (0)