8000 share some logic between enter & leave · sinabio/vue@3efd76b · GitHub
[go: up one dir, main page]
Skip to content

Commit 3efd76b

Browse files
yyx990803yyx990803
committed
share some logic between enter & leave
1 parent 0bb2087 commit 3efd76b

File tree

2 files changed

+52
-43
lines changed

2 files changed

+52
-43
lines changed

‎src/transition/transition.js

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function Transition (el, id, hooks, vm) {
3737
this.typeCache = {}
3838
// bind
3939
var self = this
40-
;['nextEnter', 'afterEnter', 'nextLeave', 'afterLeave']
40+
;['enterNextTick', 'enterDone', 'leaveNextTick', 'leaveDone']
4141
.forEach(function (m) {
4242
self[m] = _.bind(self[m], self)
4343
})
@@ -58,7 +58,7 @@ p.enter = function (op, cb) {
5858
this.cb = cb
5959
addClass(this.el, this.enterClass)
6060
op()
61-
queue.push(this.nextEnter)
61+
this.callHookWithCb('enter')
6262
}
6363

6464
/**
@@ -67,37 +67,28 @@ p.enter = function (op, cb) {
6767
* that removing the class can trigger a CSS transition.
6868
*/
6969

70-
p.nextEnter = function () {
71-
var enterHook = this.hooks && this.hooks.enter
72-
var afterEnter = this.afterEnter
73-
var expectsCb
74-
if (enterHook) {
75-
expectsCb = enterHook.length > 1
76-
if (expectsCb) {
77-
this.pendingJsCb = _.cancellable(afterEnter)
78-
}
79-
this.jsCancel = enterHook.call(this.vm, this.el, this.pendingJsCb)
80-
}
70+
p.enterNextTick = function () {
8171
var type = this.getCssTransitionType(this.enterClass)
72+
var enterDone = this.enterDone
8273
if (type === TYPE_TRANSITION) {
8374
// trigger transition by removing enter class now
8475
removeClass(this.el, this.enterClass)
85-
this.setupCssCb(transitionEndEvent, afterEnter)
76+
this.setupCssCb(transitionEndEvent, enterDone)
8677
} else if (type === TYPE_ANIMATION) {
87-
this.setupCssCb(animationEndEvent, afterEnter)
88-
} else if (!expectsCb) {
89-
afterEnter()
78+
this.setupCssCb(animationEndEvent, enterDone)
79+
} else {
80+
enterDone()
9081
}
9182
}
9283

9384
/**
9485
* The "cleanup" phase of an entering transition.
9586
*/
9687

97-
p.afterEnter = function () {
88+
p.enterDone = function () {
9889
this.jsCancel = this.pendingJsCb = null
9990
removeClass(this.el, this.enterClass)
100-
this.callHook('afterEnter')
91+
this.callHook('enterDone')
10192
if (this.cb) this.cb()
10293
}
10394

@@ -114,45 +105,33 @@ p.leave = function (op, cb) {
114105
this.op = op
115106
this.cb = cb
116107
addClass(this.el, this.leaveClass)
117-
var leaveHook = this.hooks && this.hooks.leave
118-
var expectsCb
119-
if (leaveHook) {
120-
expectsCb = leaveHook.length > 1
121-
if (expectsCb) {
122-
this.pendingJsCb = _.cancellable(this.afterLeave)
123-
}
124-
this.jsCancel = leaveHook.call(this.vm, this.el, this.pendingJsCb)
125-
}
126-
// only need to handle leave cb if no js cb is provided
127-
if (!expectsCb) {
128-
queue.push(this.nextLeave)
129-
}
108+
this.callHookWithCb('leave')
130109
}
131110

132111
/**
133112
* The "nextTick" phase of a leaving transition.
134113
*/
135114

136-
p.nextLeave = function () {
115+
p.leaveNextTick = function () {
137116
var type = this.getCssTransitionType(this.leaveClass)
138117
if (type) {
139118
var event = type === TYPE_TRANSITION
140119
? transitionEndEvent
141120
: animationEndEvent
142-
this.setupCssCb(event, this.afterLeave)
121+
this.setupCssCb(event, this.leaveDone)
143122
} else {
144-
this.afterLeave()
123+
this.leaveDone()
145124
}
146125
}
147126

148127
/**
149128
* The "cleanup" phase of a leaving transition.
150129
*/
151130

152-
p.afterLeave = function () {
131+
p.leaveDone = function () {
153132
this.op()
154133
removeClass(this.el, this.leaveClass)
155-
this.callHook('afterLeave')
134+
this.callHook('leaveDone')
156135
if (this.cb) this.cb()
157136
}
158137

@@ -185,7 +164,7 @@ p.cancelPending = function () {
185164
}
186165

187166
/**
188-
* Call a user-provided hook function.
167+
* Call a user-provided synchronous hook function.
189168
*
190169
* @param {String} type
191170
*/
@@ -196,6 +175,31 @@ p.callHook = function (type) {
196175
}
197176
}< F438 /span>
198177

178+
/**
179+
* Call a user-provided, potentially-async hook function.
180+
* We check for the length of arguments to see if the hook
181+
* expects a `done` callback. If true, the transition's end
182+
* will be determined by when the user calls that callback;
183+
* otherwise, the end is determined by the CSS transition or
184+
* animation.
185+
*
186+
* @param {String} type
187+
*/
188+
189+
p.callHookWithCb = function (type) {
190+
var hook = this.hooks && this.hooks[type]
191+
if (hook) {
192+
if (hook.length > 1) {
193+
this.pendingJsCb = _.cancellable(this[type + 'Done'])
194+
}
195+
this.jsCancel = hook.call(this.vm, this.el, this.pendingJsCb)
196+
}
197+
// only need to handle nextTick stuff if no js cb is provided
198+
if (!this.pendingJsCb) {
199+
queue.push(this[type + 'NextTick'])
200+
}
201+
}
202+
199203
/**
200204
* Get an element's transition type based on the
201205
* calculated styles.

‎test/unit/specs/directives/transition_spec.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ var def = require('../../../../src/directives/transition')
55
if (_.inBrowser) {
66
describe('v-transition', function () {
77

8-
it('should save the transition id and custom functions as data', function () {
8+
it('should instantiate a transition object with correct args', function () {
99
var fns = {}
1010
var dir = {
1111
el: document.createElement('div'),
@@ -21,12 +21,17 @@ if (_.inBrowser) {
2121
}
2222
}
2323
dir.bind()
24-
expect(dir.el.__v_trans.id).toBe('test')
25-
expect(dir.el.__v_trans.fns).toBe(fns)
24+
var transition = dir.el.__v_trans
25+
expect(transition.el).toBe(dir.el)
26+
expect(transition.hooks).toBe(fns)
27+
expect(transition.enterClass).toBe('test-enter')
28+
expect(transition.leaveClass).toBe('test-leave')
2629
expect(dir.el.className === 'test-transition')
2730
dir.update('lol', 'test')
28-
expect(dir.el.__v_trans.id).toBe('lol')
29-
expect(dir.el.__v_trans.fns).toBeUndefined()
31+
var transition = dir.el.__v_trans
32+
expect(transition.enterClass).toBe('lol-enter')
33+
expect(transition.leaveClass).toBe('lol-leave')
34+
expect(transition.fns).toBeUndefined()
3035
expect(dir.el.className === 'lol-transition')
3136
})
3237

0 commit comments

Comments
 (0)
0