fix: 翻译《动画》中遗漏的部分

This commit is contained in:
Zhicheng Wang 2018-03-12 13:21:11 +08:00 committed by Zhicheng Wang
parent 0c420c2efc
commit 797d882858
3 changed files with 16 additions and 1 deletions

View File

@ -33,6 +33,9 @@ keyframes as a fallback instead (automatically). This means that the polyfill is
code uses [AnimationBuilder](/api/animations/AnimationBuilder). If your code does use AnimationBuilder, then code uses [AnimationBuilder](/api/animations/AnimationBuilder). If your code does use AnimationBuilder, then
uncomment the `web-animations-js` polyfill from the `polyfills.ts` file generated by Angular CLI. uncomment the `web-animations-js` polyfill from the `polyfills.ts` file generated by Angular CLI.
对于 Angular 6如果浏览器没有提供对 Web 动画 API 的原生支持Angular 就会自动改用 CSS 的关键帧动画作为后备实现。这意味,除非要在代码中使用 [AnimationBuilder](/api/animations/AnimationBuilder) ,否则不必使用相关的腻子脚本。
如果你要在代码中使用 AnimationBuilder ,就要从 Angular CLI 自动生成的 `polyfills.ts` 文件中反注释掉 `web-animations-js` 腻子脚本。
</div> </div>
<div class="l-sub-section"> <div class="l-sub-section">
@ -50,21 +53,32 @@ The examples in this page are available as a <live-example></live-example>.
Before you can add animations to your application, you need Before you can add animations to your application, you need
to import a few animation-specific modules and functions to the root application module. to import a few animation-specific modules and functions to the root application module.
在往应用中添加动画之前,你要首先在应用的根模块中引入一些与动画有关的模块和函数。
<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (animation module import excerpt)" linenums="false"></code-example> <code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (animation module import excerpt)" linenums="false"></code-example>
#### Example basics #### Example basics
#### 基本例子
The animations examples in this guide animate a list of heroes. The animations examples in this guide animate a list of heroes.
这里的动画例子用来给英雄列表添加动画。
A `Hero` class has a `name` property, a `state` property that indicates if the hero is active or not, A `Hero` class has a `name` property, a `state` property that indicates if the hero is active or not,
and a `toggleState()` method to switch between the states. and a `toggleState()` method to switch between the states.
`Hero` 类有一个 `name` 属性、一个 `state` 属性(用于表明该英雄是否为激活状态)和一个 `toggleState()` 函数,用来在这两种状态之间切换。
<code-example path="animations/src/app/hero.service.ts" region="hero" title="hero.service.ts (Hero class)" linenums="false"></code-example> <code-example path="animations/src/app/hero.service.ts" region="hero" title="hero.service.ts (Hero class)" linenums="false"></code-example>
Across the top of the screen (`app.hero-team-builder.component.ts`) Across the top of the screen (`app.hero-team-builder.component.ts`)
are a series of buttons that add and remove heroes from the list (via the `HeroService`). are a series of buttons that add and remove heroes from the list (via the `HeroService`).
The buttons trigger changes to the list that all of the example components see at the same time. The buttons trigger changes to the list that all of the example components see at the same time.
在屏幕的顶部(`app.hero-team-builder.component.ts`)是一系列按钮,用于从列表中添加和删除英雄(通过 `HeroService`)。
这些按钮会引起列表的变化,同时可以看到列表中的所有范例组件。
{@a example-transitioning-between-states} {@a example-transitioning-between-states}
## Transitioning between two states ## Transitioning between two states

View File

@ -326,6 +326,8 @@ Angular通过*变更检测*过程来查找绑定值的更改并在每一次Ja
Angular picks a simpler, faster change detection algorithm when you use a pipe. Angular picks a simpler, faster change detection algorithm when you use a pipe.
当使用管道时Angular 会选用一种更简单、更快速的变更检测算法。
<h3 class="no-toc">No pipe</h3> <h3 class="no-toc">No pipe</h3>
<h3 class="no-toc">无管道</h3> <h3 class="no-toc">无管道</h3>

View File

@ -977,5 +977,4 @@ You learned
* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`. * to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`.
写了一个[自定义结构型指令](guide/structural-directives#unless) —— `UnlessDirective` 写了一个[自定义结构型指令](guide/structural-directives#unless) —— `UnlessDirective`