8000 class interpolation should preserve transition class (fix #1960) · Hsinwe/vue@212eb80 · GitHub
[go: up one dir, main page]
Skip to content

Commit 212eb80

Browse files
yyx990803yyx990803
committed
class interpolation should preserve transition class (fix vuejs#1960)
1 parent d302235 commit 212eb80

File tree

2 files changed

+31
-11
lines changed

2 files changed

+31
-11
lines changed

‎src/directives/public/bind.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { warn } from '../../util/index'
1+
import { warn, setClass } from '../../util/index'
22
import { BIND } from '../priorities'
33
import vStyle from '../internal/style'
44

@@ -87,12 +87,13 @@ export default {
8787
handleObject: vStyle.handleObject,
8888

8989
handleSingle (attr, value) {
90+
const el = this.el
9091
if (
9192
!this.descriptor.interp &&
9293
attrWithPropsRE.test(attr) &&
93-
attr in this.el
94+
attr in el
9495
) {
95-
this.el[attr] = attr === 'value'
96+
el[attr] = attr === 'value'
9697
? value == null // IE9 will set input.value to "null" for null...
9798
? ''
9899
: value
@@ -101,27 +102,34 @@ export default {
101102
// set model props
102103
var modelProp = modelProps[attr]
103104
if (modelProp) {
104-
this.el[modelProp] = value
105+
el[modelProp] = value
105106
// update v-model if present
106-
var model = this.el.__v_model
107+
var model = el.__v_model
107108
if (model) {
108109
model.listener()
109110
}
110111
}
111112
// do not set value attribute for textarea
112-
if (attr === 'value' && this.el.tagName === 'TEXTAREA') {
113-
this.el.removeAttribute(attr)
113+
if (attr === 'value' && el.tagName === 'TEXTAREA') {
114+
el.removeAttribute(attr)
114115
return
115116
}
116117
// update attribute
117118
if (value != null && value !== false) {
118-
if (xlinkRE.test(attr)) {
119-
this.el.setAttributeNS(xlinkNS, attr, value)
119+
if (attr === 'class') {
120+
// handle edge case #1960:
121+
// class interpolation should not overwrite Vue transition class
122+
if (el.__v_trans) {
123+
value += ' ' + el.__v_trans.id + '-transition'
124+
}
125+
setClass(el, value)
126+
} else if (xlinkRE.test(attr)) {
127+
el.setAttributeNS(xlinkNS, attr, value)
120128
} else {
121-
this.el.setAttribute(attr, value)
129+
el.setAttribute(attr, value)
122130
}
123131
} else {
124-
this.el.removeAttribute(attr)
132+
el.removeAttribute(attr)
125133
}
126134
}
127135
}

‎test/unit/specs/misc_spec.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,4 +416,16 @@ describe('Misc', function () {
416416
})
417417
expect(vm.$el.firstChild.getAttribute('class')).toBe('si-icon def abc')
418418
})
419+
420+
// #1960
421+
it('class interpolation should preserve transition class', function () {
422+
var vm = new Vue({
423+
el: document.createElement('div'),
424+
template: '<div class="{{test}}" transition="test"></div>',
425+
data: {
426+
test: 'hi'
427+
}
428+
})
429+
expect(vm.$el.firstChild.className).toBe('hi test-transition')
430+
})
419431
})

0 commit comments

Comments
 (0)
0