cancel outro before update

Author: pushkine

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

@@ -522,13 +522,13 @@ export default class IfBlockWrapper extends Wrapper {
 
 			const enter = b`
 				if (${name}) {
-					${dynamic && b`${name}.p(#ctx, #dirty);`}
 					${
 						has_transitions &&
 						b`if (${block.renderer.dirty(branch.dependencies)}) {
 							@transition_in(${name}, 1);
 						}`
 					}
+					${dynamic && b`${name}.p(#ctx, #dirty);`}
 				} else {
 					${name} = ${branch.block.name}(#ctx);
 					${name}.c();

test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/Component.svelte

@@ -0,0 +1 @@
+A

test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/_config.js

@@ -0,0 +1,10 @@
+export default {
+	async test({ assert, target, window, raf }) {
+		const button = target.querySelector("button");
+		const event = new window.MouseEvent("click");
+		assert.htmlEqual(target.innerHTML, "A");
+		await button.dispatchEvent(event);
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, "A");
+	},
+};

test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/main.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Component from "./Component.svelte";
+  function foo(node, params) {
+    return {
+      duration: 100,
+      tick: t => {
+        node.foo = t;
+      }
+    };
+  }
+  let isFirst = true;
+  let animationActive = false;
+
+  const toggle = () => {
+    if (animationActive) {
+      return;
+    }
+
+    animationActive = true;
+    Promise.resolve().then(() => {
+      isFirst = !isFirst;
+      animationActive = false;
+    });
+  };
+</script>
+
+<button on:click={toggle}>TOGGLE</button>
+{#if !animationActive}
+  <div out:foo>
+    {#if isFirst}
+      <Component {isFirst} />
+    {:else}
+      <Component {isFirst} />
+    {/if}
+  </div>
+{/if}