From 7215260aa2da2395e18377beb81fbbb4f6e477dc Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sun, 9 Jun 2019 16:22:16 -0400
Subject: [PATCH] tweak transition stuff

---
 site/content/docs/02-template-syntax.md | 106 +++++++++++++-----------
 1 file changed, 57 insertions(+), 49 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index adef3d0757..a6e17f8bc2 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -377,6 +377,13 @@ Handlers can be declared inline with no performance penalty. As with attributes,
 
 Add *modifiers* to DOM events with the `|` character.
 
+```html
+<form on:submit|preventDefault={handleSubmit}>
+	<!-- the `submit` event's default is prevented,
+	     so the page won't reload -->
+</form>
+```
+
 The following modifiers are available:
 
 * `preventDefault` — calls `event.preventDefault()` before running the handler
@@ -387,13 +394,6 @@ The following modifiers are available:
 
 Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
 
-```html
-<form on:submit|preventDefault={handleSubmit}>
-	<!-- the `submit` event's default is prevented,
-	     so the page won't reload -->
-</form>
-```
-
 ---
 
 If the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
@@ -697,43 +697,19 @@ An action can have parameters. If the returned value has an `update` method, it
 ```
 
 
-#### transition:/in:/out:
+#### transition:*fn*
 
 ```sv
-transition:name
+transition:fn
 ```
 ```sv
-transition:name={params}
+transition:fn={params}
 ```
 ```sv
-transition:name|local
+transition:fn|local
 ```
 ```sv
-transition:name|local={params}
-```
-```sv
-in:name
-```
-```sv
-in:name={params}
-```
-```sv
-in:name|local
-```
-```sv
-in:name|local={params}
-```
-```sv
-out:name
-```
-```sv
-out:name={params}
-```
-```sv
-out:name|local
-```
-```sv
-out:name|local={params}
+transition:fn|local={params}
 ```
 
 
@@ -749,7 +725,7 @@ transition = (node: HTMLElement, params: any) => {
 
 ---
 
-A transition is triggered by an element entering or leaving the DOM as a result of a state change. Transitions do not run when a component is first mounted, but only on subsequent updates.
+A transition is triggered by an element entering or leaving the DOM as a result of a state change.
 
 Elements inside an *outroing* block are kept in the DOM until all current transitions have completed.
 
@@ -763,18 +739,6 @@ The `transition:` directive indicates a *bidirectional* transition, which means
 {/if}
 ```
 
----
-
-The `in:` and `out:` directives are not bidirectional. An in transition will continue to 'play' alongside the out transition, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
-
-```html
-{#if visible}
-	<div in:fly out:fade>
-		flies in, fades out
-	</div>
-{/if}
-```
-
 > By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](docs#Client-side_component_API).
 
 ##### Transition parameters
@@ -913,6 +877,50 @@ Local transitions only play when the block they belong to is created or destroye
 ```
 
 
+#### in:*fn*/out:*fn*
+
+```sv
+in:fn
+```
+```sv
+in:fn={params}
+```
+```sv
+in:fn|local
+```
+```sv
+in:fn|local={params}
+```
+
+```sv
+out:fn
+```
+```sv
+out:fn={params}
+```
+```sv
+out:fn|local
+```
+```sv
+out:fn|local={params}
+```
+
+---
+
+Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM.
+
+Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+
+```html
+{#if visible}
+	<div in:fly out:fade>
+		flies in, fades out
+	</div>
+{/if}
+```
+
+
+
 #### animate:
 
 ```sv