[fix] create in transition even if intro is initialized (#6516)

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

@@ -760,7 +760,7 @@ export default class ElementWrapper extends Wrapper {
 					intro_block = b`
 						@add_render_callback(() => {
 							if (${outro_name}) ${outro_name}.end(1);
-							if (!${intro_name}) ${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
+							${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
 							${intro_name}.start();
 						});
 					`;

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

@@ -0,0 +1,21 @@
+export default {
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		// animation duration of `in` should be 10ms.
+		assert.equal(div.style.animation, '__svelte_1670736059_0 10ms linear 0ms 1 both');
+
+		// animation duration of `out` should be 5ms.
+		component.visible = false;
+		assert.equal(div.style.animation, '__svelte_1670736059_0 10ms linear 0ms 1 both, __svelte_1998461463_0 5ms linear 0ms 1 both');
+
+		// change param
+		raf.tick(1);
+		component.param = true;
+		component.visible = true;
+
+		// animation duration of `in` should be 20ms.
+		assert.equal(div.style.animation, '__svelte_722598827_0 20ms linear 0ms 1 both');
+	}
+};

test/runtime/samples/transition-css-in-out-in-with-param/main.svelte

@@ -0,0 +1,26 @@
+<script>
+	export let visible = false;
+	export let param = false;
+
+	function getInParam() {
+		return { 
+			duration: param ? 20 : 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+
+	function getOutParam() {
+		return { 
+			duration: param ? 15 : 5,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:getInParam out:getOutParam></div>
+{/if}

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

@@ -15,6 +15,6 @@ export default {
 		component.visible = true;
 
 		// reset original styles
-		assert.equal(div.style.animation, '__svelte_3809512021_1 100ms linear 0ms 1 both');
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both');
 	}
 };