File tree Expand file tree Collapse file tree 1 file changed +14
-7
lines changed Expand file tree Collapse file tree 1 file changed +14
-7
lines changed Original file line number Diff line number Diff line change 19
19
border-top : 1px solid # fff ;
20
20
border-bottom : 1px solid # e3e3e3 ;
21
21
}
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
+ }
22
30
.example-list-item : before {
23
31
content : 'Line: ' ;
24
32
}
25
33
</ style >
26
34
</ head >
27
35
< body >
28
36
< 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 >
31
39
</ div >
32
40
< script >
33
41
new Vue ( {
34
42
el : '#app' ,
35
43
data : {
36
44
distance : 100 ,
37
- list : [ ]
45
+ list : [ ] ,
46
+ bounce : null ,
38
47
} ,
39
48
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' } ;
43
50
} ,
44
51
methods : {
45
52
onInfinite : function ( ) {
46
53
setTimeout ( function ( ) {
47
54
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 ++ ) {
49
56
temp . push ( i ) ;
50
57
}
51
58
You can’t perform that action at this time.
0 commit comments