Skip to content

Support v-class attr of svg in IE #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 4, 2014
Merged

Support v-class attr of svg in IE #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1cce70
check classList with each element
tyage Oct 31, 2014
90869ba
support svg class name for ie
tyage Oct 31, 2014
036eae2
use method in utils instead of classList
tyage Oct 31, 2014
4e31c35
indent
tyage Oct 31, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions src/transition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
var endEvents = sniffEndEvents(),
config = require('./config'),
utils = require('./utils'),
// batch enter animations so we only force the layout once
Batcher = require('./batcher'),
batcher = new Batcher(),
Expand Down Expand Up @@ -79,10 +80,7 @@ function applyTransitionClass (el, stage, changeState, hasAnimation) {
return codes.CSS_SKIP
}

// if the browser supports transition,
// it must have classList...
var onEnd,
classList = el.classList,
existingCallback = el.vue_trans_cb,
enterClass = config.enterClass,
leaveClass = config.leaveClass,
Expand All @@ -91,30 +89,30 @@ function applyTransitionClass (el, stage, changeState, hasAnimation) {
// cancel unfinished callbacks and jobs
if (existingCallback) {
el.removeEventListener(endEvent, existingCallback)
classList.remove(enterClass)
classList.remove(leaveClass)
utils.removeClass(el, enterClass)
utils.removeClass(el, leaveClass)
el.vue_trans_cb = null
}

if (stage > 0) { // enter

// set to enter state before appending
classList.add(enterClass)
utils.addClass(el, enterClass)
// append
changeState()
// trigger transition
if (!hasAnimation) {
batcher.push({
execute: function () {
classList.remove(enterClass)
utils.removeClass(el, enterClass)
}
})
} else {
onEnd = function (e) {
if (e.target === el) {
el.removeEventListener(endEvent, onEnd)
el.vue_trans_cb = null
classList.remove(enterClass)
utils.removeClass(el, enterClass)
}
}
el.addEventListener(endEvent, onEnd)
Expand All @@ -128,7 +126,7 @@ function applyTransitionClass (el, stage, changeState, hasAnimation) {
// trigger hide transition
batcher.push({
execute: function () {
classList.add(leaveClass)
utils.addClass(el, leaveClass)
}
})
onEnd = function (e) {
Expand All @@ -137,7 +135,7 @@ function applyTransitionClass (el, stage, changeState, hasAnimation) {
el.vue_trans_cb = null
// actually remove node here
changeState()
classList.remove(leaveClass)
utils.removeClass(el, leaveClass)
}
}
// attach transition end listener
Expand All @@ -148,7 +146,7 @@ function applyTransitionClass (el, stage, changeState, hasAnimation) {
changeState()
}
return codes.CSS_L

}

}
Expand Down
26 changes: 16 additions & 10 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ var config = require('./config'),
THIS_RE = /[^\w]this[^\w]/,
BRACKET_RE_S = /\['([^']+)'\]/g,
BRACKET_RE_D = /\["([^"]+)"\]/g,
hasClassList = 'classList' in document.documentElement,
ViewModel // late def

var defer =
Expand Down Expand Up @@ -257,36 +256,43 @@ var utils = module.exports = {
},

/**
* add class for IE9
* add class for IE
* uses classList if available
*/
addClass: function (el, cls) {
if (hasClassList) {
if (el.classList) {
el.classList.add(cls)
} else {
var cur = ' ' + el.className + ' '
var cur = ' ' + utils.getClassName(el) + ' '
if (cur.indexOf(' ' + cls + ' ') < 0) {
el.className = (cur + cls).trim()
el.setAttribute('class', (cur + cls).trim())
}
}
},

/**
* remove class for IE9
* remove class for IE
*/
removeClass: function (el, cls) {
if (hasClassList) {
if (el.classList) {
el.classList.remove(cls)
} else {
var cur = ' ' + el.className + ' ',
var cur = ' ' + utils.getClassName(el) + ' ',
tar = ' ' + cls + ' '
while (cur.indexOf(tar) >= 0) {
cur = cur.replace(tar, ' ')
}
el.className = cur.trim()
el.setAttribute('class', cur.trim())
}
},

/**
* get class name for IE
*/
getClassName: function(el) {
return (el.className instanceof SVGAnimatedString ? el.className.baseVal : el.className)
},

/**
* Convert an object to Array
* used in v-repeat and array filters
Expand Down Expand Up @@ -328,4 +334,4 @@ function enableDebug () {
}
}
}
}
}