run transitions in context of component - fixes #1675

src/shared/index.js

@@ -97,10 +97,6 @@ export function on(eventName, handler) {
 	};
 }
 
-export function run(fn) {
-	fn();
-}
-
 export function set(newState) {
 	this._set(assign({}, newState));
 	if (this.root._lock) return;

src/shared/transitions.js

@@ -1,5 +1,5 @@
 import { createElement } from './dom.js';
-import { noop } from './utils.js';
+import { noop, run } from './utils.js';
 
 export function linear(t) {
 	return t;
@@ -27,7 +27,7 @@ export function hash(str) {
 }
 
 export function wrapTransition(component, node, fn, params, intro) {
-	let obj = fn(node, params);
+	let obj = fn.call(component, node, params);
 	let duration;
 	let ease;
 	let cssText;
@@ -137,9 +137,7 @@ export function wrapTransition(component, node, fn, params, intro) {
 				});
 
 				if (--program.group.remaining === 0) {
-					program.group.callbacks.forEach(fn => {
-						fn();
-					});
+					program.group.callbacks.forEach(run);
 				}
 			} else {
 				if (obj.css) transitionManager.deleteRule(node, program.name);

src/shared/utils.js

@@ -31,4 +31,8 @@ export function exclude(src, prop) {
 	const tar = {};
 	for (const k in src) k === prop || (tar[k] = src[k]);
 	return tar;
+}
+
+export function run(fn) {
+	fn();
 }

test/runtime/samples/transition-js-context/_config.js

@@ -0,0 +1,9 @@
+export default {
+	test(assert, component, target, window, raf) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 42);
+
+		raf.tick(50);
+		assert.equal(div.foo, 42);
+	}
+};

test/runtime/samples/transition-js-context/main.html

@@ -0,0 +1,20 @@
+<div transition:foo></div>
+
+<script>
+	export default {
+		data() {
+			return { x: 42 };
+		},
+
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = this.get().x;
+					}
+				};
+			}
+		}
+	};
+</script>