From 0a803ec991e82429f97d90183095fe6f310c5a3c Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 15 Apr 2017 18:56:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E8=AE=A2=E5=AE=8Canimation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/guide/animations.jade | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 389eea68b0..1f4825c754 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/public/docs/ts/latest/guide/animations.jade @@ -102,6 +102,7 @@ figure 动画会被定义在`@Component`元数据中。在添加动画之前，先引入一些与动画有关的函数： +makeExample('animations/ts/src/app/app.module.ts', 'animations-module', 'app.module.ts (@NgModule imports excerpt)')(format=".") + +makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports', 'hero-list-basic.component.ts')(format=".") :marked @@ -266,8 +267,10 @@ figure.image-display ## Example: Entering and leaving ## 例子：进场与离场 + figure img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;") + :marked Using the `void` and `*` states you can define transitions that animate the entering and leaving of elements: @@ -485,7 +488,7 @@ figure slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: - 这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，但它们有不同的缓动函数。“离场”动画会在轻微的延迟之后开始： + 这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，也就是`0.2s`，但它们有不同的缓动函数。“离场”动画会在100毫秒的延迟之后开始，也就是`'0.2s 10 ease-out'`： +makeExample('animations/ts/src/app/hero-list-timings.component.ts', 'animationdef', 'hero-list-timings.component.ts (excerpt)')(format=".")