fix

src/compiler/compile/render_dom/Block.ts

@@ -206,7 +206,7 @@ export default class Block {
 	}
 
 	group_transition_out(fn) {
-		return this.has_outros ? b`@group_transition_out((#transition_out) => { ${fn(x`#transition_out`)} })` : fn(null);
+		return b`@group_transition_out((#transition_out) => { ${fn(x`#transition_out`)} })`;
 	}
 
 	add_variable(id: Identifier, init?: Node) {

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -7,7 +7,7 @@ import FragmentWrapper from './Fragment';
 import { b, x } from 'code-red';
 import ElseBlock from '../../nodes/ElseBlock';
 import { Identifier, Node } from 'estree';
-import bit_state from '../../utils/bit_state'
+import bit_state from '../../utils/bit_state';
 
 export class ElseBlockWrapper extends Wrapper {
 	node: ElseBlock;
@@ -434,7 +434,7 @@ export default class EachBlockWrapper extends Wrapper {
 				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
 				${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`}
 				${this.renderer.options.dev && b`@validate_each_keys(#ctx, ${this.vars.each_block_value}, ${this.vars.get_each_context}, ${get_key});`}
-				${this.block.group_transition_out(update_keyed_each)}
+				${(this.block.has_outros ? this.block.group_transition_out : v => v(null))(update_keyed_each)}
 				${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`}
 			`);
 		}
@@ -548,9 +548,12 @@ export default class EachBlockWrapper extends Wrapper {
 			if (this.block.has_outros) {
 				remove_old_blocks = this.block.group_transition_out((transition_out) =>
 					b`for (#i = ${data_length}; #i < ${view_length}; #i += 1) {
-						${transition_out}(#i);
+						const #index = #i;
+						${transition_out}(${iterations}[#index], () => {
+							${iterations}[#index] = null;
+						});
 					}`
-				)
+				);
 			} else {
 				remove_old_blocks = b`
 					for (${this.block.has_update_method ? null : x`#i = ${data_length}`}; #i < ${this.block.has_update_method ? view_length : '#old_length'}; #i += 1) {

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -751,8 +751,8 @@ export default class ElementWrapper extends Wrapper {
 		let outro_block = b`${name} = @run_bidirectional_transition(${this.var}, ${fn}, 2, ${snippet});`;
 
 		if (intro.is_local) {
-			intro_block = b`if (#local) {${intro_block}}`;
+			intro_block = b`if (#local) { ${intro_block} }`;
-			outro_block = b`if (#local) {${outro_block}}`;
+			outro_block = b`if (#local) { ${outro_block} }`;
 		}
 		block.chunks.intro.push(intro_block);
 		block.chunks.outro.push(outro_block);
@@ -777,12 +777,11 @@ export default class ElementWrapper extends Wrapper {
 		if (!intro) return;
 
 		const [intro_var, node, transitionFn, params] = run_transition(this, block, intro, `intro`);
-		block.add_variable(intro_var, x`@noop`);
+		block.add_variable(intro_var, outro ? x`@noop`: null);
 
-		let start_intro;
+		let start_intro = b`${intro_var} = @run_transition(${node}, ${transitionFn}, 1, ${params});`;
-		if (intro.is_local)
+		if (!outro) start_intro = b`if (!${intro_var}) { ${start_intro} }`;
-			start_intro = b`if (#local) ${intro_var} = @run_transition(${node}, ${transitionFn}, 1, ${params});`;
+		if (intro.is_local) start_intro = b`if (#local) { ${start_intro} }`;
-		else start_intro = b`${intro_var} = @run_transition(${node}, ${transitionFn}, 1, ${params});`;
 		block.chunks.intro.push(start_intro);
 	}
 	// TODO
@@ -798,9 +797,8 @@ export default class ElementWrapper extends Wrapper {
 		const [outro_var, node, transitionFn, params] = run_transition(this, block, outro, `outro`);
 		block.add_variable(outro_var, x`@noop`);
 
-		let start_outro;
+		let start_outro = b`${outro_var} = @run_transition(${node}, ${transitionFn}, 2, ${params});`;
-		if (outro.is_local) start_outro = b`if (#local) @run_transition(${node}, ${transitionFn}, 2, ${params});`;
+		if (outro.is_local) start_outro = b`if (#local) { ${start_outro} }`;
-		else start_outro = b`${outro_var} = @run_transition(${node}, ${transitionFn}, 2, ${params});`;
 		block.chunks.outro.push(start_outro);
 
 		block.chunks.destroy.push(b`if (detaching) ${outro_var}();`);

src/runtime/internal/environment.ts

@@ -21,8 +21,8 @@ export let raf = is_browser ? requestAnimationFrame : noop;
 export let framerate = 1000 / 60;
 /*#__PURE__*/ raf((t1) => {
 	raf((d) => {
-		const f24 = 1000 / 24,
+		const f24 = 1000 / 24;
-			f144 = 1000 / 144;
+		const f144 = 1000 / 144;
 		framerate = (d = d - t1) > f144 ? f144 : d < f24 ? f24 : d;
 	});
 });
@@ -30,4 +30,3 @@ export let framerate = 1000 / 60;
 /* tests only */
 export const set_now = (v) => void (now = v);
 export const set_raf = (fn) => void (raf = fn);
-export const set_framerate = (v) => void (framerate = v);

src/runtime/internal/keyed_each.ts

@@ -95,3 +95,13 @@ export const update_keyed_each = (
 
 	return new_blocks;
 };
+export function validate_each_keys(ctx, list, get_context, get_key) {
+	const keys = new Set();
+	for (let i = 0; i < list.length; i++) {
+		const key = get_key(get_context(ctx, list, i));
+		if (keys.has(key)) {
+			throw new Error(`Cannot have duplicate keys in a keyed each`);
+		}
+		keys.add(key);
+	}
+}

src/runtime/internal/loop.ts

@@ -2,13 +2,13 @@ import { now, raf, framerate, noop } from './environment';
 type TaskCallback = (t: number) => boolean;
 type TaskCanceller = () => void;
 
-let i = 0,
+let i = 0;
-	j = 0,
+let j = 0;
-	n = 0,
+let n = 0;
-	v : TaskCallback;
+let v: TaskCallback;
 
-let running_frame : Array<TaskCallback> = [],
+let running_frame: TaskCallback[] = [];
-	next_frame	  : Array<TaskCallback> = [];
+let	next_frame: TaskCallback[] = [];
 
 const run = (t: number) => {
 	[running_frame, next_frame] = [next_frame, running_frame];
@@ -24,11 +24,11 @@ const run = (t: number) => {
 
 type TimeoutTask = { timestamp: number; callback: (now: number) => void };
 
-const pending_insert_timed	: Array<TimeoutTask> = [],
+const pending_insert_timed: TimeoutTask[] = [];
-	  timed_tasks			: Array<TimeoutTask> = [];
+const timed_tasks: TimeoutTask[] = [];
 
-let pending_inserts = false,
+let pending_inserts = false;
-	running_timed = false;
+let	running_timed = false;
 
 const run_timed = (now: number) => {
 	let last_index = timed_tasks.length - 1;
@@ -79,20 +79,20 @@ export const setTweenTimeout = (
 	stop: (now: number) => void,
 	end_time: number,
 	run: (now: number) => void,
-	duration = end_time - now()
+	duration = end_time - now(),
+	is_outro = false
 ): TaskCanceller => {
 	let running = true;
-	let t = 0.0;
+	let t = 1 - (end_time - now) / duration || 0;
+	if (!is_outro && t <= 1.0) run(t >= 0.0 ? t : 0);
 	unsafe_loop((now) => {
 		if (!running) return false;
-		t = 1.0 - (end_time - now) / duration;
+		t = 1 - (end_time - now) / duration;
 		if (t >= 1.0) return run(1), stop(now), false;
 		if (t >= 0.0) run(t);
 		return running;
 	});
 	return (run_last = false) => {
-		// since outros are cancelled in group by a setFrameTimeout
-		// tick(0, 1) has to be called in here
 		if (run_last) run(1);
 		running = false;
 	};

src/runtime/internal/scheduler.ts

@@ -28,13 +28,17 @@ export const schedule_update = (component) => {
 	dirty_components.push(component);
 	if (!update_scheduled) {
 		update_scheduled = true;
-		resolved_promise.then(flush);
+		if (!is_flushing) {
+			resolved_promise.then(flush);
+		}
 	}
 };
 export const tick = () => {
 	if (!update_scheduled) {
 		update_scheduled = true;
-		resolved_promise.then(flush);
+		if (!is_flushing) {
+			resolved_promise.then(flush);
+		}
 	}
 	return resolved_promise;
 };
@@ -42,13 +46,13 @@ export const flush = () => {
 	if (is_flushing) return;
 	else is_flushing = true;
 
-	let i = 0,
+	let i = 0;
-		j = 0,
+	let	j = 0;
-		t = 0,
+	let	t = 0;
-		$$: T$$,
+	let	$$: T$$;
-		dirty,
+	let	dirty;
-		before_update,
+	let	before_update;
-		after_update;
+	let	after_update;
 
 	do {
 		for (;i < dirty_components.length;i++) {
@@ -101,4 +105,8 @@ export const flush = () => {
 	flush_callbacks.length = i = j = 0;
 
 	is_flushing = false;
+	if (update_scheduled) { 
+		// reflush if applying animations triggered an update
+		flush();
+	}
 };

src/runtime/internal/style_manager.ts

@@ -1,4 +1,5 @@
 import { framerate } from './environment';
+import { methodify } from './utils';
 
 let documents_uid = 0;
 let running_animations = 0;
@@ -7,56 +8,54 @@ const document_uid = new Map();
 const document_stylesheets = new Map();
 
 const current_rules = new Set();
-export const animate_css = /*#__PURE__*/ Function.prototype.call.bind(function animate_css(
+export const animate_css = /*#__PURE__*/ methodify(
-	this: HTMLElement,
+	function animate_css(this: HTMLElement, css: (t: number) => string, duration: number, delay = 0) {
-	css: (t: number) => string,
+		if (!document_uid.has(this.ownerDocument)) {
-	duration: number,
+			document_uid.set(this.ownerDocument, documents_uid++);
-	delay = 0
+			document_stylesheets.set(
-) {
+				this.ownerDocument,
-	if (!document_uid.has(this.ownerDocument)) {
+				this.ownerDocument.head.appendChild(this.ownerDocument.createElement('style')).sheet
-		document_uid.set(this.ownerDocument, documents_uid++);
+			);
-		document_stylesheets.set(
+		}
-			this.ownerDocument,
+		let rule = '{\n';
-			this.ownerDocument.head.appendChild(this.ownerDocument.createElement('style')).sheet
+		for (let t = 0, step = framerate / duration; t < 1; t += step) rule += `${100 * t}%{${css(t)}}\n`;
-		);
+		rule += `100% {${css(1)}}\n}`;
-	}
+
-	let rule = '{\n';
+		// darkskyapp/string-hash
-	for (let t = 0, step = framerate / duration; t < 1; t += step) rule += `${100 * t}%{${css(t)}}\n`;
+		let i = rule.length;
-	rule += `100% {${css(1)}}\n}`;
+		let hash = 5381;
-
+		while (i--) hash = ((hash << 5) - hash) ^ rule.charCodeAt(i);
-	// darkskyapp/string-hash
+		const name = `__svelte_${hash >>> 0}${document_uid.get(this.ownerDocument)}`;
-	let i = rule.length, hash = 5381;
+
-	while (i--) hash = ((hash << 5) - hash) ^ rule.charCodeAt(i);
+		if (!current_rules.has(name)) {
-	const name = `__svelte_${hash >>> 0}${document_uid.get(this.ownerDocument)}`;
+			current_rules.add(name);
-
+			const stylesheet = document_stylesheets.get(this.ownerDocument);
-	if (!current_rules.has(name)) {
+			stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
-		current_rules.add(name);
+		}
-		const stylesheet = document_stylesheets.get(this.ownerDocument);
-		stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
-	}
 
-	const previous = this.style.animation;
+		const previous = this.style.animation;
-	this.style.animation = `${
+		this.style.animation = `${
-		previous ? `${previous}, ` : ''
+			previous ? `${previous}, ` : ''
-	}${duration}ms linear ${delay}ms 1 normal both running ${name}`;
+		}${duration}ms linear ${delay}ms 1 normal both running ${name}`;
-
+
-	running_animations++;
+		running_animations++;
-
+
-	return () => {
+		return () => {
-		const prev = (this.style.animation || '').split(', ');
+			const prev = (this.style.animation || '').split(', ');
-		const next = prev.filter((anim) => !anim.includes(name));
+			const next = prev.filter((anim) => !anim.includes(name));
-		if (prev.length !== next.length) this.style.animation = next.join(', ');
+			if (prev.length !== next.length) this.style.animation = next.join(', ');
-		if (--running_animations === 0) {
+			if (--running_animations === 0) {
-			document_stylesheets.forEach((stylesheet) => {
+				document_stylesheets.forEach((stylesheet) => {
-				let i = stylesheet.cssRules.length;
+					let i = stylesheet.cssRules.length;
-				while (i--) stylesheet.deleteRule(i);
+					while (i--) stylesheet.deleteRule(i);
-			});
+				});
-			current_rules.clear();
+				current_rules.clear();
-			if (1 !== documents_uid) {
+				if (1 !== documents_uid) {
-				document_stylesheets.clear();
+					document_stylesheets.clear();
-				document_uid.clear();
+					document_uid.clear();
-				documents_uid = 0;
+					documents_uid = 0;
+				}
 			}
-		}
+		};
-	};
+	}
-});
+);

src/runtime/internal/transitions.ts

@@ -5,6 +5,7 @@ import { now, noop } from './environment';
 import { setFrameTimeout, setTweenTimeout } from './loop';
 import { add_measure_callback } from './scheduler';
 import { animate_css } from './style_manager';
+import { methodify } from './utils';
 
 type TransitionFn = (node: HTMLElement, params: any) => CssTransitionConfig;
 export type StopResetReverseFn = (t?: number | -1) => StopResetReverseFn | void;
@@ -22,9 +23,9 @@ export const transition_out = (block: Fragment, local?) => {
 };
 type TransitionGroup = {
 	/* parent group 		*/ p: TransitionGroup;
-	/* callbacks 			*/ c: ((cancelled: boolean) => void)[];
+	/* callbacks 			*/ c: Array<((cancelled: boolean) => void)>;
 	/* running outros		*/ r: number;
-	/* stop callbacks		*/ s: ((t: number) => void)[];
+	/* stop callbacks		*/ s: Array<((t: number) => void)>;
 	/* outro timeout 		*/ t: number;
 };
 let transition_group: TransitionGroup;
@@ -82,7 +83,7 @@ export const enum tx {
 	bidirectional = 4,
 	animation = 8,
 }
-export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(function transition(
+export const run_transition = /*#__PURE__*/ methodify(function transition(
 	this: HTMLElement,
 	fn: TransitionFn,
 	rx: tx,
@@ -96,11 +97,11 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
 	
 	let running = true;
 
-	let cancel_css,
+	let cancel_css;
-		cancel_raf;
+	let	cancel_raf;
 
-	let start_time = 0,
+	let start_time = 0;
-		end_time = 0;
+	let	end_time = 0;
 
 	const current_group = transition_group;
 	if (rx & tx.outro) current_group.r++;
@@ -129,7 +130,7 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
 			}
 
 			if (css) cancel_css = animate_css(this, runner(css), duration, delay);
-
+			
 			if (rx & tx.outro) {
 				if (current_group.s.push(stop) === current_group.r) {
 					setFrameTimeout((t) => {
@@ -138,7 +139,7 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
 				} else {
 					current_group.t = Math.max(end_time, current_group.t);
 				}
-				if (tick) cancel_raf = setTweenTimeout(noop, end_time, runner(tick), duration);
+				if (tick) cancel_raf = setTweenTimeout(noop, end_time, runner(tick), duration, true);
 			} else {
 				cancel_raf = tick ? setTweenTimeout(stop, end_time, runner(tick), duration) : setFrameTimeout(stop, end_time);
 			}
@@ -146,7 +147,6 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
 	});
 
 	const stop: StopResetReverseFn = (t?: number | 1 | -1) => {
-		// resetting `out:` in intros
 		if (t === 1 && rx & tx.outro && 0 === (rx & tx.bidirectional) && 'tick' in config) config.tick(1, 0);
 
 		if (false === running) return;
@@ -184,19 +184,16 @@ export const run_transition = /*#__PURE__*/ Function.prototype.call.bind(functio
 });
 
 const running_bidi: Map<HTMLElement, StopResetReverseFn> = new Map();
-export const run_bidirectional_transition = /*#__PURE__*/ Function.prototype.call.bind(function bidirectional(
+export const run_bidirectional_transition = /*#__PURE__*/ methodify(
-	this: HTMLElement,
+	function bidirectional(this: HTMLElement, fn: TransitionFn, rx: tx.intro | tx.outro, params: any ) {
-	fn: TransitionFn,
+		let cancel;
-	rx: tx.intro | tx.outro,
+		running_bidi.set(
-	params: any
+			this,
-) {
+			(cancel =
-	let cancel;
+				(running_bidi.has(this) && running_bidi.get(this)(-1)) || run_transition(this, fn, rx | tx.bidirectional, params))
-	running_bidi.set(
+		);
-		this,
+		return cancel;
-		(cancel =
+	}
-			(running_bidi.has(this) && running_bidi.get(this)(-1)) || run_transition(this, fn, rx | tx.bidirectional, params))
+);
-	);
-	return cancel;
-});
 export const run_duration = (duration, value1, value2?): number =>
 	typeof duration === 'function' ? duration(value1, value2) : duration;

src/runtime/transition/index.ts

@@ -13,14 +13,14 @@ export interface CssTransitionConfig extends CssAnimationConfig {
 	tick?: (t: number, u?: number) => void;
 }
 
-type FlyParams = FadingConfig & { x: number; y: number; };
+type FlyParams = FadingConfig & { x: number; y: number };
-type BlurParams = FadingConfig & { amount: number; };
+type BlurParams = FadingConfig & { amount: number };
-type ScaleParams = FadingConfig & { start: number; };
+type ScaleParams = FadingConfig & { start: number };
-type DrawParams = CssAnimationConfig & { speed : number };
+type DrawParams = CssAnimationConfig & { speed: number };
-type FadingConfig = CssAnimationConfig & { opacity: number; };
+type FadingConfig = CssAnimationConfig & { opacity: number };
-type MarkedCrossFadeConfig = TimeableConfig & { key: any; };
+type MarkedCrossFadeConfig = TimeableConfig & { key: any };
 export type TimeableConfig = Omit<CssAnimationConfig, 'duration'> & { duration?: number | ((len: number) => number) };
-type CrossFadeConfig = TimeableConfig & { fallback(node: Element, params: TimeableConfig, intro: boolean): CssTransitionConfig; };
+type CrossFadeConfig = TimeableConfig & { fallback(node: Element, params: TimeableConfig, intro: boolean): CssTransitionConfig };
 type ElementMap = Map<any, Element>;
 
 export function blur(node: Element, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 }: BlurParams): CssTransitionConfig {

test/js/samples/each-block-keyed-animated/expected.js

@@ -2,15 +2,14 @@
 import {
 	SvelteComponent,
 	append,
-	create_animation,
 	detach,
 	element,
 	empty,
-	fix_and_destroy_block,
 	fix_position,
 	init,
 	insert,
 	noop,
+	run_animation,
 	safe_not_equal,
 	set_data,
 	text,
@@ -28,6 +27,7 @@ function create_each_block(key_1, ctx) {
 	let div;
 	let t_value = /*thing*/ ctx[1].name + "";
 	let t;
+	let unfreeze;
 	let rect;
 	let stop_animation = noop;
 
@@ -50,15 +50,18 @@ function create_each_block(key_1, ctx) {
 			rect = div.getBoundingClientRect();
 		},
 		f() {
-			fix_position(div);
 			stop_animation();
+			unfreeze = fix_position(div, rect);
 		},
 		a() {
-			stop_animation();
+			if (unfreeze) return; else {
-			stop_animation = create_animation(div, rect, foo, {});
+				stop_animation();
+				stop_animation = run_animation(div, rect, foo);
+			}
 		},
 		d(detaching) {
 			if (detaching) detach(div);
+			unfreeze = void 0;
 		}
 	};
 }
@@ -95,7 +98,7 @@ function create_fragment(ctx) {
 			if (dirty & /*things*/ 1) {
 				const each_value = /*things*/ ctx[0];
 				for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r();
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, fix_and_destroy_block, create_each_block, each_1_anchor, get_each_context);
+				each_blocks = update_keyed_each(each_blocks, dirty, ctx, 3, get_key, each_value, each_1_lookup, each_1_anchor.parentNode, create_each_block, each_1_anchor, get_each_context);
 				for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a();
 			}
 		},

test/js/samples/each-block-keyed/expected.js

@@ -2,7 +2,6 @@
 import {
 	SvelteComponent,
 	append,
-	destroy_block,
 	detach,
 	element,
 	empty,
@@ -79,7 +78,7 @@ function create_fragment(ctx) {
 		p(ctx, [dirty]) {
 			if (dirty & /*things*/ 1) {
 				const each_value = /*things*/ ctx[0];
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context);
+				each_blocks = update_keyed_each(each_blocks, dirty, ctx, 1, get_key, each_value, each_1_lookup, each_1_anchor.parentNode, create_each_block, each_1_anchor, get_each_context);
 			}
 		},
 		i: noop,

test/js/samples/transition-local/expected.js

@@ -1,14 +1,13 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
-	add_render_callback,
-	create_in_transition,
 	detach,
 	element,
 	empty,
 	init,
 	insert,
 	noop,
+	run_transition,
 	safe_not_equal,
 	transition_in
 } from "svelte/internal";
@@ -66,14 +65,13 @@ function create_if_block_1(ctx) {
 		i(local) {
 			if (local) {
 				if (!div_intro) {
-					add_render_callback(() => {
+					div_intro = run_transition(div, foo, 1);
-						div_intro = create_in_transition(div, foo, {});
-						div_intro.start();
-					});
 				}
 			}
 		},
-		o: noop,
+		o(local) {
+			div_intro();
+		},
 		d(detaching) {
 			if (detaching) detach(div);
 		}

test/js/samples/transition-repeated-outro/expected.js

@@ -1,14 +1,14 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
-	check_outros,
-	create_out_transition,
 	detach,
 	element,
 	empty,
-	group_outros,
+	group_transition_out,
 	init,
 	insert,
+	noop,
+	run_transition,
 	safe_not_equal,
 	transition_in,
 	transition_out
@@ -18,7 +18,7 @@ import { fade } from "svelte/transition";
 
 function create_if_block(ctx) {
 	let div;
-	let div_outro;
+	let div_outro = noop;
 	let current;
 
 	return {
@@ -32,16 +32,16 @@ function create_if_block(ctx) {
 		},
 		i(local) {
 			if (current) return;
-			if (div_outro) div_outro.end(1);
+			div_outro(1);
 			current = true;
 		},
 		o(local) {
-			div_outro = create_out_transition(div, fade, {});
+			div_outro = run_transition(div, fade, 2);
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(div);
-			if (detaching && div_outro) div_outro.end();
+			if (detaching) div_outro();
 		}
 	};
 }
@@ -74,13 +74,11 @@ function create_fragment(ctx) {
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
 			} else if (if_block) {
-				group_outros();
+				group_transition_out(transition_out => {
-
+					transition_out(if_block, () => {
-				transition_out(if_block, 1, 1, () => {
+						if_block = null;
-					if_block = null;
+					});
 				});
-
-				check_outros();
 			}
 		},
 		i(local) {

test/runtime/samples/transition-css-in-out-in/_config.js

@@ -2,19 +2,19 @@ export default {
 	test({ assert, component, target, window, raf }) {
 		component.visible = true;
 		const div = target.querySelector('div');
+		const startsWith = (str) =>
+			assert.equal(div.style.animation.slice(0, div.style.animation.length-1), str);
 
-		assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both`);
+		startsWith(`100ms linear 0ms 1 normal both running __svelte_3261048502`);
 
 		raf.tick(50);
 		component.visible = false;
 
-		// both in and out styles
+		startsWith(`100ms linear 0ms 1 normal both running __svelte_890840093`);
-		assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both`);
 
 		raf.tick(75);
 		component.visible = true;
 
-		// reset original styles
+		startsWith(`100ms linear 0ms 1 normal both running __svelte_3261048502`);
-		assert.equal(div.style.animation, `__svelte_3809512021_1 100ms linear 0ms 1 both`);
 	},
 };

test/runtime/samples/transition-js-await-block/_config.js

@@ -29,8 +29,8 @@ export default {
 			const ps = document.querySelectorAll('p');
 			assert.equal(ps[1].className, 'pending');
 			assert.equal(ps[0].className, 'then');
-			assert.equal(ps[1].foo, 0.2);
+			assert.equal(Math.round(ps[1].foo * 10) / 10, 0.2);
-			assert.equal(ps[0].foo, 0.3);
+			assert.equal(Math.round(ps[0].foo * 10) / 10, 0.3);
 		});
 	}
 };

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

@@ -3,7 +3,7 @@ export default {
 		component.visible = true;
 
 		return Promise.resolve().then(() => {
-			const div = target.querySelector('div');
+			const div = target.querySelector('.foo');
 			assert.equal(div.foo, 0);
 
 			raf.tick(50);

test/runtime/samples/transition-js-deferred/main.svelte

@@ -40,7 +40,7 @@
 </script>
 
 {#if visible}
-	<div transition:foo>a</div>
+	<div class="foo" transition:foo>a</div>
 {:else}
 	<div transition:bar>b</div>
 {/if}

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

@@ -13,15 +13,9 @@ export default {
 		component.visible = false;
 
 		raf.tick(125);
-		assert.equal(div.foo, 0.75);
+		assert.equal(div.foo, 0.25);
 
 		raf.tick(150);
-		assert.equal(div.foo, 1);
-
-		raf.tick(175);
-		assert.equal(div.foo, 0.75);
-
-		raf.tick(250);
 		assert.equal(div.foo, 0);
 	}
 };

test/runtime/samples/transition-js-each-block-intro-outro/_config.js

@@ -19,9 +19,9 @@ export default {
 		component.visible = false;
 
 		raf.tick(70);
-		assert.equal(divs[0].foo, 0.7);
+		assert.equal(divs[0].foo, 0.5);
-		assert.equal(divs[1].foo, 0.7);
+		assert.equal(divs[1].foo, 0.5);
-		assert.equal(divs[2].foo, 0.7);
+		assert.equal(divs[2].foo, 0.5);
 
 		assert.equal(divs[0].bar, 0.8);
 		assert.equal(divs[1].bar, 0.8);
@@ -30,9 +30,9 @@ export default {
 		component.visible = true;
 
 		raf.tick(100);
-		assert.equal(divs[0].foo, 0.3);
+		assert.equal(Math.round(divs[0].foo * 10) / 10, 0.3);
-		assert.equal(divs[1].foo, 0.3);
+		assert.equal(Math.round(divs[1].foo * 10) / 10, 0.3);
-		assert.equal(divs[2].foo, 0.3);
+		assert.equal(Math.round(divs[2].foo * 10) / 10, 0.3);
 
 		assert.equal(divs[0].bar, 1);
 		assert.equal(divs[1].bar, 1);

test/runtime/samples/transition-js-events-in-out/_config.js

@@ -10,7 +10,7 @@ export default {
 		<p>waiting...</p>
 	`,
 
-	async test({ assert, component, target, raf }) {
+	test({ assert, component, target, raf }) {
 		component.visible = true;
 
 		assert.htmlEqual(target.innerHTML, `
@@ -21,12 +21,12 @@ export default {
 			<p>d</p>
 		`);
 
-		await raf.tick(50);
+		raf.tick(50);
 
 		assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
 		assert.equal(component.intro_count, 4);
 
-		await raf.tick(100);
+		raf.tick(100);
 		assert.equal(component.intro_count, 0);
 
 		assert.htmlEqual(target.innerHTML, `
@@ -47,16 +47,16 @@ export default {
 			<p>d</p>
 		`);
 
-		await raf.tick(150);
+		raf.tick(150);
 		assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
 		assert.equal(component.outro_count, 4);
 
-		await raf.tick(200);
+		raf.tick(200);
 		assert.equal(component.outro_count, 0);
 
 		component.visible = true;
 
-		await raf.tick(250);
+		raf.tick(250);
 		assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
 		assert.equal(component.intro_count, 4);
 

test/runtime/samples/transition-js-if-block-intro-outro/_config.js

@@ -32,11 +32,11 @@ export default {
 
 		component.visible = false;
 		raf.tick(1300);
-		assert.equal(div.foo, 0.75);
+		assert.equal(div.foo, 0.5);
 		assert.equal(div.bar, 0.75);
 
 		raf.tick(1400);
-		assert.equal(div.foo, 1);
+		assert.equal(div.foo, 0.5);
 		assert.equal(div.bar, 0.5);
 
 		raf.tick(2000);