From 91dd138fa572083cb19317ad2398d1c0e20e81c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Tue, 11 Oct 2016 15:44:38 -0700
Subject: [PATCH] docs(animations): document :enter and :leave transition
 aliases (#12222)

---
 modules/@angular/core/src/animation/metadata.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/modules/@angular/core/src/animation/metadata.ts b/modules/@angular/core/src/animation/metadata.ts
index bb75c792a3..d9eb948c4b 100644
--- a/modules/@angular/core/src/animation/metadata.ts
+++ b/modules/@angular/core/src/animation/metadata.ts
@@ -540,6 +540,22 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
  * ])
  * ```
  *
+ * ### Transition Aliases (`:enter` and `:leave`)
+ *
+ * Given that enter (insertion) and leave (removal) animations are so common,
+ * the `transition` function accepts both `:enter` and `:leave` values which
+ * are aliases for the `void => *` and `* => void` state changes.
+ *
+ * ```
+ * transition(":enter", [
+ *   style({ opacity: 0 }),
+ *   animate(500, style({ opacity: 1 }))
+ * ])
+ * transition(":leave", [
+ *   animate(500, style({ opacity: 0 }))
+ * ])
+ * ```
+ *
  * ### Example ([live demo](http://plnkr.co/edit/Kez8XGWBxWue7qP7nNvF?p=preview))
  *
  * {@example core/animation/ts/dsl/animation_example.ts region='Component'}