fix svg animation

SVGElement::className isn’t a `string`, it’s a `SVGAnimatedString`

Author: zemlanin

src/CSSCore.js

@@ -17,16 +17,24 @@ const RE_CLASS = /[\n\t\r]+/g;
 let norm = elemClass => (SPACE + elemClass + SPACE).replace(RE_CLASS, SPACE);
 
 export function addClass(elem, className) {
-	elem.className += ' ' + className;
+	if (elem.classList) {
+		elem.classList.add(className);
+	} else {
+		elem.className += ' ' + className;
+	}
 }
 
 export function removeClass(elem, needle) {
-	let elemClass = elem.className.trim();
-	let className = norm(elemClass);
 	needle = needle.trim();
-	needle = SPACE + needle + SPACE;
-	while (className.indexOf(needle) >= 0) {
-		className = className.replace(needle, SPACE);
+	if (elem.classList) {
+		elem.classList.remove(needle);
+	} else {
+		let elemClass = elem.className.trim();
+		let className = norm(elemClass);
+		needle = SPACE + needle + SPACE;
+		while (className.indexOf(needle) >= 0) {
+			className = className.replace(needle, SPACE);
+		}
+		elem.className = className.trim();
 	}
-	elem.className = className.trim();
 }

tests/index.js

@@ -51,6 +51,38 @@ class TodoList extends Component {
 	}
 }
 
+class SVGList extends Component {
+	state = {
+		items: ['hello', 'world', 'click', 'me']
+	};
+
+	handleAdd(item) {
+		let { items } = this.state;
+		items = items.concat(item);
+		this.setState({ items });
+	}
+
+	handleRemove(i) {
+		let { items } = this.state;
+		items.splice(i, 1);
+		this.setState({ items });
+	}
+
+	render(_, { items }) {
+		return (
+			<svg>
+				<CSSTransitionGroup transitionName="example" component="g">
+					{ items.map( (item, i) => (
+						<text key={item} className="item">
+							{item}
+						</text>
+					)) }
+				</CSSTransitionGroup>
+			</svg>
+		);
+	}
+}
+
 
 const Nothing = () => null;
 
@@ -115,3 +147,60 @@ describe('CSSTransitionGroup', () => {
 		}, 1400);
 	});
 });
+
+describe('CSSTransitionGroup: SVG', () => {
+	let container = document.createElement('div'),
+		list, root;
+	document.body.appendChild(container);
+
+	let $ = s => [].slice.call(container.querySelectorAll(s));
+
+	beforeEach( () => {
+		root = render(<div><Nothing /></div>, container, root);
+		root = render(<div><SVGList ref={c => list=c} /></div>, container, root);
+	});
+
+	afterEach( () => {
+		list = null;
+	});
+
+	it('create works', () => {
+		expect($('.item')).to.have.length(4);
+	});
+
+	it('transitionLeave works', done => {
+		list.handleRemove(0);
+
+		setTimeout( () => {
+			expect($('.item')).to.have.length(4);
+
+			expect($('.item')[0].classList.contains('example-leave'));
+			expect($('.item')[0].classList.contains('example-leave-active'));
+		}, 100);
+
+		setTimeout( () => {
+			expect($('.item')).to.have.length(3);
+			done();
+		}, 1400);
+	});
+
+	it('transitionEnter works', done => {
+		list.handleAdd(Date.now());
+
+		setTimeout( () => {
+			expect($('.item')).to.have.length(5);
+
+			expect($('.item')[4].classList.contains('example-enter'));
+			expect($('.item')[4].classList.contains('example-enter-active'));
+		}, 500);
+
+		setTimeout( () => {
+			expect($('.item')).to.have.length(5);
+
+			expect(!$('.item')[4].classList.contains('example-enter'));
+			expect(!$('.item')[4].classList.contains('example-enter-active'));
+
+			done();
+		}, 1400);
+	});
+});