Skip to content

Commit bda8e76

Browse files
author
Evan You
committed
js transitions => v-effect
1 parent e52ec65 commit bda8e76

File tree

8 files changed

+41
-39
lines changed

8 files changed

+41
-39
lines changed

‎src/compiler.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -341,8 +341,9 @@ CompilerProto.compile = function (node, root) {
341341
} else {
342342

343343
// check transition & animation properties
344-
node.vue_trans = utils.attr(node, 'transition')
345-
node.vue_anim = utils.attr(node, 'animation')
344+
node.vue_trans = utils.attr(node, 'transition')
345+
node.vue_anim = utils.attr(node, 'animation')
346+
node.vue_effect = utils.attr(node, 'effect')
346347

347348
// replace innerHTML with partial
348349
partialId = utils.attr(node, 'partial')

‎src/config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ var prefix = 'v',
88
'partial',
99
'component',
1010
'animation',
11-
'transition'
11+
'transition',
12+
'effect'
1213
],
1314
config = module.exports = {
1415

‎src/directives/repeat.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,6 @@ module.exports = {
129129
// extract child VM information, if any
130130
ViewModel = ViewModel || require('../viewmodel')
131131
this.Ctor = this.Ctor || ViewModel
132-
// extract transition information
133-
this.hasTrans = el.hasAttribute(config.attrs.transition)
134132
// extract child Id, if any
135133
this.childId = utils.attr(el, 'ref')
136134

@@ -274,8 +272,9 @@ module.exports = {
274272

275273
el = this.el.cloneNode(true)
276274
// process transition info before appending
277-
el.vue_trans = utils.attr(el, 'transition', true)
278-
el.vue_anim = utils.attr(el, 'animation', true)
275+
el.vue_trans = utils.attr(el, 'transition', true)
276+
el.vue_anim = utils.attr(el, 'animation', true)
277+
el.vue_effect = utils.attr(el, 'effect', true)
279278
// wrap primitive element in an object
280279
if (utils.typeOf(data) !== 'Object') {
281280
primitive = true

‎src/main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ var config = require('./config'),
22
ViewModel = require('./viewmodel'),
33
utils = require('./utils'),
44
makeHash = utils.hash,
5-
assetTypes = ['directive', 'filter', 'partial', 'transition', 'component']
5+
assetTypes = ['directive', 'filter', 'partial', 'effect', 'component']
66

77
// require these so Browserify can catch them
88
// so they can be used in Vue.require
@@ -13,7 +13,7 @@ ViewModel.options = config.globalAssets = {
1313
directives : require('./directives'),
1414
filters : require('./filters'),
1515
partials : makeHash(),
16-
transitions : makeHash(),
16+
effects : makeHash(),
1717
components : makeHash()
1818
}
1919

‎src/transition.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,23 +40,24 @@ var transition = module.exports = function (el, stage, cb, compiler) {
4040
return codes.INIT
4141
}
4242

43-
var transitionId = el.vue_trans,
44-
isAnimation = el.vue_anim === ''
43+
var hasTransition = el.vue_trans === '',
44+
hasAnimation = el.vue_anim === '',
45+
effectId = el.vue_effect
4546

46-
if (transitionId) {
47+
if (effectId) {
4748
return applyTransitionFunctions(
4849
el,
4950
stage,
5051
changeState,
51-
transitionId,
52+
effectId,
5253
compiler
5354
)
54-
} else if (transitionId === '' || isAnimation) {
55+
} else if (hasTransition || hasAnimation) {
5556
return applyTransitionClass(
5657
el,
5758
stage,
5859
changeState,
59-
isAnimation
60+
hasAnimation
6061
)
6162
} else {
6263
changeState()
@@ -70,7 +71,7 @@ transition.codes = codes
7071
/**
7172
* Togggle a CSS class to trigger transition
7273
*/
73-
function applyTransitionClass (el, stage, changeState, isAnimation) {
74+
function applyTransitionClass (el, stage, changeState, hasAnimation) {
7475

7576
if (!endEvents.trans) {
7677
changeState()
@@ -84,7 +85,7 @@ function applyTransitionClass (el, stage, changeState, isAnimation) {
8485
existingCallback = el.vue_trans_cb,
8586
enterClass = config.enterClass,
8687
leaveClass = config.leaveClass,
87-
endEvent = isAnimation
88+
endEvent = hasAnimation
8889
? endEvents.anim
8990
: endEvents.trans
9091

@@ -99,14 +100,14 @@ function applyTransitionClass (el, stage, changeState, isAnimation) {
99100
if (stage > 0) { // enter
100101

101102
// set to hidden state before appending
102-
if (!isAnimation) {
103+
if (!hasAnimation) {
103104
classList.add(enterClass)
104105
}
105106
// append
106107
changeState()
107108
job = {}
108109
// trigger transition
109-
if (!isAnimation) {
110+
if (!hasAnimation) {
110111
job.execute = function () {
111112
classList.remove(enterClass)
112113
}
@@ -154,9 +155,9 @@ function applyTransitionClass (el, stage, changeState, isAnimation) {
154155

155156
}
156157

157-
function applyTransitionFunctions (el, stage, changeState, functionId, compiler) {
158+
function applyTransitionFunctions (el, stage, changeState, effectId, compiler) {
158159

159-
var funcs = compiler.getOption('transitions', functionId)
160+
var funcs = compiler.getOption('effects', effectId)
160161
if (!funcs) {
161162
changeState()
162163
return codes.JS_SKIP

‎test/unit/specs/api.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -278,26 +278,26 @@ describe('UNIT: API', function () {
278278
})
279279
})
280280

281-
describe('transition()', function () {
281+
describe('effect()', function () {
282282

283-
var testId = 'api-trans-test',
284-
transition = {}
283+
var testId = 'api-effect-test',
284+
effect = {}
285285

286-
it('should register a transition object', function () {
287-
Vue.transition(testId, transition)
288-
assert.strictEqual(assets.transitions[testId], transition)
286+
it('should register a effect object', function () {
287+
Vue.effect(testId, effect)
288+
assert.strictEqual(assets.effects[testId], effect)
289289
})
290290

291-
it('should retrieve the transition if has only one arg', function () {
292-
assert.strictEqual(Vue.transition(testId), transition)
291+
it('should retrieve the effect if has only one arg', function () {
292+
assert.strictEqual(Vue.effect(testId), effect)
293293
})
294294

295-
it('should work with v-transition', function (done) {
295+
it('should work with v-effect', function (done) {
296296

297297
var enterCalled = false,
298298
leaveCalled = false
299299

300-
Vue.transition('transition-api-test', {
300+
Vue.effect('effect-api-test', {
301301
enter: function (el, done) {
302302
enterCalled = true
303303
done()
@@ -311,7 +311,7 @@ describe('UNIT: API', function () {
311311
var t = new Vue({
312312
attributes: {
313313
'v-show': 'show',
314-
'v-transition': 'transition-api-test'
314+
'v-effect': 'effect-api-test'
315315
},
316316
data: {
317317
show: false
@@ -733,19 +733,19 @@ describe('UNIT: API', function () {
733733

734734
})
735735

736-
describe('transitions', function () {
736+
describe('effects', function () {
737737

738-
it('should get called during transitions', function (done) {
738+
it('should get called during effects', function (done) {
739739

740740
var enterCalled = false,
741741
leaveCalled = false
742742

743743
var t = new Vue({
744744
attributes: {
745745
'v-show': 'show',
746-
'v-transition': 'test'
746+
'v-effect': 'test'
747747
},
748-
transitions: {
748+
effects: {
749749
test: {
750750
enter: function (el, done) {
751751
enterCalled = true

‎test/unit/specs/transition.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ describe('UNIT: Transition', function () {
311311
if (type === 'css') {
312312
el.vue_trans = ''
313313
} else if (type === 'js') {
314-
el.vue_trans = 'test'
314+
el.vue_effect = 'test'
315315
}
316316
return el
317317
}

‎test/unit/specs/viewmodel.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -280,9 +280,9 @@ describe('UNIT: ViewModel', function () {
280280

281281
var v = new Vue({
282282
attributes: {
283-
'v-transition': 'test'
283+
'v-effect': 'test'
284284
},
285-
transitions: {
285+
effects: {
286286
test: {
287287
enter: function (el, change) {
288288
enterCalled = true

0 commit comments

Comments
 (0)