Skip to content

Commit 0a1823f

Browse files
PeachScriptPeachScript
committed
Revert changes of transition support
1 parent ca10309 commit 0a1823f

File tree

3 files changed

+24
-217
lines changed

3 files changed

+24
-217
lines changed

‎example/index.html‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,40 +19,33 @@
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-
}
3022
.example-list-item:before{
3123
content: 'Line: ';
3224
}
3325
</style>
3426
</head>
3527
<body>
3628
<div id="app">
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>
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>
3931
</div>
4032
<script>
4133
new Vue({
4234
el: '#app',
4335
data: {
4436
distance: 100,
45-
list: [],
46-
bounce: null,
37+
list: []
4738
},
4839
ready: function () {
49-
this.bounce = this.$options.transitions.bounce = { type: 'transition' };
40+
for (var i = 0; i < 50; i++) {
41+
this.list.push(i + 1);
42+
}
5043
},
5144
methods: {
5245
onInfinite: function () {
5346
setTimeout(function () {
5447
var temp = [];
55-
for (var i = this.list.length; i <= this.list.length + 30; i++) {
48+
for (var i = this.list.length; i <= this.list.length + 20; i++) {
5649
temp.push(i);
5750
}
5851

‎src/components/InfiniteLoading.vue‎

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="infinite-loading-container">
33
<slot name="spinner">
4-
<i :class="spinnerType" v-show="isLoading && !isTransitioning"></i>
4+
<i :class="spinnerType" v-show="isLoading"></i>
55
</slot>
66
<div class="infinite-status-prompt" v-show="!isLoading && isComplete && isFirstLoad">
77
<slot name="no-results">No results :(</slot>
@@ -62,8 +62,6 @@
6262
isLoading: false,
6363
isComplete: false,
6464
isFirstLoad: true, // save the current loading whether it is the first loading
65-
isTransitioning: false, // save transition status
66-
loadedCount: 0,
6765
};
6866
},
6967
computed: {
@@ -81,13 +79,6 @@
8179
required: true,
8280
},
8381
spinner: String,
84-
transition: {
85-
type: Object, // Must be a Vue transition object
86-
},
87-
staggerCount: {
88-
type: Number,
89-
default: null,
90-
},
9182
},
9283
ready() {
9384
this.scrollParent = getScrollParent(this.$el);
@@ -103,59 +94,22 @@
10394
setTimeout(this.scrollHandler, 1);
10495
this.scrollParent.addEventListener('scroll', this.scrollHandler);
10596
},
106-
methods: {
107-
listenTransitionEndOnce(callback, isReset = false) {
108-
if (this.transition) {
109-
const type = isReset ? 'afterLeave' : 'afterEnter';
110-
const originalListener = this.transition[type];
111-
let staggerIndex = 0;
112-
113-
this.isTransitioning = true;
114-
this.transition[type] = () => {
115-
// has no stagger or complete all stagger
116-
if (this.staggerCount === null ||
117-
++staggerIndex === Math.abs(this.staggerCount - this.loadedCount)) {
118-
// restore original hook
119-
if (typeof originalListener === 'function') {
120-
originalListener.call(this);
121-
this.transition[type] = originalListener;
122-
} else {
123-
delete this.transition[type];
124-
}
125-
this.loadedCount = this.staggerCount; // save current count
126-
this.isTransitioning = false;
127-
callback.call(this);
128-
} else if (typeof originalListener === 'function') {
129-
originalListener.call(this);
130-
}
131-
};
132-
} else {
133-
callback.call(this);
134-
}
135-
},
136-
},
13797
events: {
13898
'$InfiniteLoading:loaded': function loaded() {
139-
this.listenTransitionEndOnce(() => {
140-
this.isLoading = false;
141-
this.isFirstLoad = false;
142-
});
99+
this.isLoading = false;
100+
this.isFirstLoad = false;
143101
},
144102
'$InfiniteLoading:complete': function complete() {
145-
this.listenTransitionEndOnce(() => {
146-
this.isLoading = false;
147-
this.isComplete = true;
148-
this.scrollParent.removeEventListener('scroll', this.scrollHandler);
149-
});
103+
this.isLoading = false;
104+
this.isComplete = true;
105+
this.scrollParent.removeEventListener('scroll', this.scrollHandler);
150106
},
151107
'$InfiniteLoading:reset': function reset() {
152-
this.listenTransitionEndOnce(() => {
153-
this.isLoading = false;
154-
this.isComplete = false;
155-
this.isFirstLoad = true;
156-
this.scrollParent.addEventListener('scroll', this.scrollHandler);
157-
setTimeout(this.scrollHandler, 1);
158-
}, true);
108+
this.isLoading = false;
109+
this.isComplete = false;
110+
this.isFirstLoad = true;
111+
this.scrollParent.addEventListener('scroll', this.scrollHandler);
112+
setTimeout(this.scrollHandler, 1);
159113
},
160114
},
161115
destroyed() {

‎test/unit/specs/InfiniteLoading.spec.js‎

Lines changed: 6 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ function isShow(elm) {
1010
describe('InfiniteLoading.vue', () => {
1111
let vm;
1212

13-
Vue.transition('bounce', { type: 'transition', afterEnter() {} });
14-
1513
// create new Vue instance for every test case
1614
beforeEach(() => {
1715
vm = new Vue({
@@ -59,11 +57,11 @@ describe('InfiniteLoading.vue', () => {
5957

6058
it('should execute callback and display a spinner immediately after initialize', (done) => {
6159
vm.onInfinite = function test() {
62-
this.$nextTick(() => {
60+
Vue.nextTick(() => {
6361
expect(isShow(vm.$el.querySelector('.loading-default'))).to.be.true;
6462
done();
6563
});
66-
}.bind(vm);
64+
};
6765

6866
vm.$mount().$appendTo('body');
6967
});
@@ -75,7 +73,7 @@ describe('InfiniteLoading.vue', () => {
7573
this.list.push(i);
7674
}
7775

78-
this.$nextTick(() => {
76+
Vue.nextTick(() => {
7977
if (this.list.length === 20) {
8078
vm.$el.addEventListener('scroll', () => {
8179
expect(this.list).to.have.lengthOf(20);
@@ -94,7 +92,7 @@ describe('InfiniteLoading.vue', () => {
9492
it('should be destroyed completely by v-if', (done) => {
9593
vm.onInfinite = function test() {
9694
this.isLoadedAll = true;
97-
this.$nextTick(() => {
95+
Vue.nextTick(() => {
9896
expect(vm.$el.querySelector('.loading-default')).to.not.be.ok;
9997
done();
10098
});
@@ -106,7 +104,7 @@ describe('InfiniteLoading.vue', () => {
106104
it('should display no results prompt', (done) => {
107105
vm.onInfinite = function test() {
108106
this.$broadcast('$InfiniteLoading:complete');
109-
this.$nextTick(() => {
107+
Vue.nextTick(() => {
110108
expect(isShow(vm.$el.querySelectorAll('.infinite-status-prompt')[0])).to.be.true;
111109
done();
112110
});
@@ -119,7 +117,7 @@ describe('InfiniteLoading.vue', () => {
119117
vm.onInfinite = function test() {
120118
this.$broadcast('$InfiniteLoading:loaded');
121119
this.$broadcast('$InfiniteLoading:complete');
122-
this.$nextTick(() => {
120+
Vue.nextTick(() => {
123121
expect(isShow(vm.$el.querySelectorAll('.infinite-status-prompt')[1])).to.be.true;
124122
done();
125123
});
@@ -149,142 +147,4 @@ describe('InfiniteLoading.vue', () => {
149147

150148
expect(vm.$el.querySelector('.custom-spinner')).to.be.ok;
151149
});
152-
153-
it('should working properly with transition and stagger', (done) => {
154-
const transitonVm = new Vue({
155-
data: {
156-
list: [],
157-
distance: 50,
158-
isLoadedAll: false,
159-
isDivScroll: true,
160-
isCustomSpinner: false,
161-
bounce: Vue.transition('bounce'),
162-
stagger: 10,
163-
pageItems: 20,
164-
},
165-
template: `
166-
<div style="height: 100px; overflow: auto;">
167-
<style>
168-
.item.bounce-transition{
169-
transition: all .3s;
170-
opacity: 1;
171-
}
172-
.item.bounce-enter, .item.bounce-leave{
173-
opacity: 0;
174-
}
175-
</style>
176-
<ul>
177-
<li class="item" v-for="item in list" v-text="item" transition="bounce"
178-
:stagger="stagger"></li>
179-
</ul>
180-
<infinite-loading :distance="distance"
181-
:on-infinite="onInfinite"
182-
v-if="!isLoadedAll"
183-
:transition="bounce"
184-
:stagger-count="list.length">
185-
</infinite-loading>
186-
</div>
187-
`,
188-
components: { InfiniteLoading },
189-
methods: {
190-
onInfinite() {
191-
const len = this.list.length + 1;
192-
for (let i = len; i < len + this.pageItems; i++) {
193-
this.list.push(i);
194-
}
195-
196-
this.$nextTick(() => {
197-
this.$broadcast('$InfiniteLoading:loaded');
198-
199-
if (this.list.length <= this.pageItems) {
200-
// wait for transition complete
201-
setTimeout(() => {
202-
this.$el.onscroll = () => {
203-
this.$nextTick(() => {
204-
// load more data when scroll after transition
205-
expect(this.list.length).to.equal(this.pageItems * 2);
206-
done();
207-
});
208-
};
209-
210-
// trigger scroll event manually
211-
this.$el.scrollTop = this.$el.scrollHeight;
212-
}, (this.stagger * this.pageItems) + 310);
213-
}
214-
});
215-
},
216-
},
217-
});
218-
219-
transitonVm.$mount().$appendTo('body');
220-
});
221-
222-
it('should reset properly with transition and stagger', (done) => {
223-
const transitonVm = new Vue({
224-
data: {
225-
list: [],
226-
distance: 50,
227-
isLoadedAll: false,
228-
isDivScroll: true,
229-
isCustomSpinner: false,
230-
bounce: Vue.transition('bounce'),
231-
stagger: 10,
232-
pageItems: 20,
233-
},
234-
template: `
235-
<div style="height: 100px; overflow: auto;">
236-
<style>
237-
.item.bounce-transition{
238-
transition: all .3s;
239-
opacity: 1;
240-
}
241-
.item.bounce-enter, .item.bounce-leave{
242-
opacity: 0;
243-
}
244-
</style>
245-
<ul>
246-
<li class="item" v-for="item in list" v-text="item" transition="bounce"
247-
:stagger="stagger"></li>
248-
</ul>
249-
<infinite-loading :distance="distance"
250-
:on-infinite="onInfinite"
251-
v-if="!isLoadedAll"
252-
:transition="bounce"
253-
:stagger-count="list.length">
254-
</infinite-loading>
255-
</div>
256-
`,
257-
components: { InfiniteLoading },
258-
ready() {
259-
// when the transition doesn't has hook function
260-
delete this.bounce.afterEnter;
261-
},
262-
methods: {
263-
onInfinite() {
264-
const len = this.list.length + 1;
265-
for (let i = len; i < len + this.pageItems; i++) {
266-
this.list.push(i);
267-
}
268-
this.$broadcast('$InfiniteLoading:loaded');
269-
270-
// wait for transition complete
271-
setTimeout(() => {
272-
this.list = [];
273-
274-
// item will be removed one by one, so the count of item not be 0 immediately
275-
expect(this.$el.querySelectorAll('ul li').length !== 0).to.be.true;
276-
277-
// wait for transition complete
278-
setTimeout(() => {
279-
expect(this.$el.querySelectorAll('ul li')).to.have.lengthOf(0);
280-
this.$broadcast('$InfiniteLoading:reset');
281-
done();
282-
}, (this.pageItems * this.stagger) + 300);
283-
}, (this.pageItems * this.stagger) + 300);
284-
},
285-
},
286-
});
287-
288-
transitonVm.$mount().$appendTo('body');
289-
});
290150
});

0 commit comments

Comments
 (0)