fix: 修改完了路由动画
This commit is contained in:
Zhicheng Wang
parent
f507538567
commit
9d5cf52003
|
|
@ -95,7 +95,7 @@ Workspace-wide `node_modules` dependencies are visible to this project.
|
|||
| `browserlist` | <t>Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserlist on GitHub](https://github.com/browserslist/browserslist) for more information. </t>配置各个目标浏览器和 Node.js 版本之间的市场占有率，供各种前端工具使用。详情参见 [GitHub 上的 Browserlist](https://github.com/browserslist/browserslist)。<t></t> |
|
||||
| `favicon.ico` | <t>An icon to use for this app in the bookmark bar. </t><t>一个用在书签栏上的应用图标。</t> |
|
||||
| `index.html` | <t>The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or` <link>` tags here manually. </t><t>当有人访问你的应用时给出的主 HTML 文件，你通常不用手动在这里添加任何 `<script>` 或` <link>` 标签。</t> |
|
||||
| `main.ts` | <t>The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. </t><t>应用的主入口点。使用 [JIT 编译器](https://angular.io/guide/glossary#jit)编译应用，并引导应用的根模块 AppModule 来运行在浏览器中。你也可以为 CLI 的 `build` 和 `serve` 命令添加 `--aot` 标志，来使用 [AOT 编译器](https://angular.io/guide/aot-compiler) 而不必修改任何代码。</t> |
|
||||
| `main.ts` | <t>The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. </t><t>应用的主入口点。使用 [JIT 编译器](https://angular.cn/guide/glossary#jit)编译应用，并引导应用的根模块 AppModule 来运行在浏览器中。你也可以为 CLI 的 `build` 和 `serve` 命令添加 `--aot` 标志，来使用 [AOT 编译器](https://angular.cn/guide/aot-compiler) 而不必修改任何代码。</t> |
|
||||
| `polyfills.ts` | <t>Provides polyfill scripts for browser support. </t><t>为浏览器支持提供腻子脚本（polyfill）。</t> |
|
||||
| `styles.sass` | <t>Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project. </t><t>列出为项目提供样式的 CSS 文件。其扩展名和你为项目配置的样式预处理器保持一致。</t> |
|
||||
| `test.ts` | <t>The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file. </t><t>单元测试的主入口点，其中带有一些特定于 Angular 的配置。一般来说你不必编辑这个问题。</t> |
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ A basic understanding of the following concepts:
|
|||
|
||||
The [AnimationOptions](https://angular.io/api/animations/AnimationOptions) interface in Angular animations enables you to create animations that you can reuse across different components.
|
||||
|
||||
Angular 动画库中的 [AnimationOptions](https://angular.io/api/animations/AnimationOptions) 接口让你能创建可以在不同组件之间复用的动画。
|
||||
Angular 动画库中的 [AnimationOptions](https://angular.cn/api/animations/AnimationOptions) 接口让你能创建可以在不同组件之间复用的动画。
|
||||
|
||||
## Creating reusable animations
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ Angular 动画库中的 [AnimationOptions](https://angular.io/api/animations/Ani
|
|||
|
||||
To create a reusable animation, use the [`animation()`](https://angular.io/api/animations/animation) method to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. You can then import and reuse this animation in any of your app components using the [`useAnimation()`](https://angular.io/api/animations/useAnimation) API.
|
||||
|
||||
要想创建可复用的动画，请使用 [`animation()`](https://angular.io/api/animations/animation) 方法来在独立的 `.ts` 文件中定义动画，并把该动画的定义声明为一个导出的 `const` 变量。然后你就可以在应用的组件代码中通过 [`useAnimation()`](https://angular.io/api/animations/useAnimation) 来导入并复用它了。
|
||||
要想创建可复用的动画，请使用 [`animation()`](https://angular.cn/api/animations/animation) 方法来在独立的 `.ts` 文件中定义动画，并把该动画的定义声明为一个导出的 `const` 变量。然后你就可以在应用的组件代码中通过 [`useAnimation()`](https://angular.cn/api/animations/useAnimation) 来导入并复用它了。
|
||||
|
||||
<code-example path="animations/src/app/animations.ts" header="src/app/animations.ts" region="reusable" language="typescript" linenums="false">
|
||||
</code-example>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,57 @@
|
|||
# Route transition animations
|
||||
|
||||
# 路由转场动画
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
#### 前提条件
|
||||
|
||||
A basic understanding of the following concepts:
|
||||
|
||||
对下列概念有基本的理解：
|
||||
|
||||
* [Introduction to Angular animations](guide/animations)
|
||||
|
||||
[Angular 动画简介](guide/animations)
|
||||
|
||||
* [Transition and triggers](guide/transition-and-triggers)
|
||||
|
||||
[转场与触发器](guide/transition-and-triggers)
|
||||
|
||||
* [Reusable animations](guide/reusable-animations)
|
||||
|
||||
[可复用的动画](guide/reusable-animations)
|
||||
|
||||
<hr>
|
||||
|
||||
Routing enables users to navigate between different routes in an application. When a user navigates from one route to another, the Angular router maps the URL path to a relevant component and displays its view. Animating this route transition can greatly enhance the user experience.
|
||||
|
||||
路由能让用户在应用中的不同路由之间导航。当用户从一个路由导航到另一个路由时，Angular 路由器会把这个 URL 映射到一个相关的组件，并显示其视图。为这种路由转换添加动画，将极大地提升用户体验。
|
||||
|
||||
The Angular router comes with high-level animation functions that let you animate the transitions between views when a route changes. To produce an animation sequence when switching between routes, you need to define nested animation sequences. Start with the top-level component that hosts the view, and nest additional animations in the components that host the embedded views.
|
||||
|
||||
Angular 路由器天生带有高级动画功能，它可以让你为路由变化时为视图之间设置转场动画。要想在路由切换时生成动画序列，你需要首先定义出嵌套的动画序列。从宿主视图的顶级组件开始，在这些内嵌视图的宿主组件中嵌套添加其它动画。
|
||||
|
||||
To enable routing transition animation, do the following:
|
||||
|
||||
要启用路由转场动画，需要做如下步骤：
|
||||
|
||||
1. Import the routing module into the application and create a routing configuration that defines the possible routes.
|
||||
|
||||
为应用导入路由模块，并创建一个路由配置来定义可能的路由。
|
||||
|
||||
2. Add a router outlet to tell the Angular router where to place the activated components in the DOM.
|
||||
|
||||
添加路由器出口，来告诉 Angular 路由器要把激活的组件放在 DOM 中的什么位置。
|
||||
|
||||
3. Define the animation.
|
||||
|
||||
定义动画。
|
||||
|
||||
Let's illustrate a router transition animation by navigating between two routes, *Home* and *About* associated with the `HomeComponent` and `AboutComponent` views respectively. Both of these component views are children of the top-most view, hosted by `AppComponent`. We'll implement a router transition animation that slides in the new view to the right and slides out the old view when the user navigates between the two routes.
|
||||
|
||||
让我们以两个路由之间的导航过程来解释一下路由转场动画，*Home* 和 *About* 分别与 `HomeComponent` 和 `AboutComponent` 的视图相关联。所有这些组件视图都是顶级视图的子节点，其宿主是 `AppComponent`。我们将实现路由器过渡动画，该动画会在出现新视图时向右滑动，并当用户在两个路由之间导航时把旧视图滑出。
|
||||
|
||||
</br>
|
||||
|
||||
<figure>
|
||||
|
|
@ -31,109 +60,207 @@ Let's illustrate a router transition animation by navigating between two routes,
|
|||
|
||||
## Route configuration
|
||||
|
||||
## 路由配置
|
||||
|
||||
To begin, configure a set of routes using methods available in the `RouterModule` class. This route configuration tells the router how to navigate.
|
||||
|
||||
首先，使用 `RouterModule` 类提供的方法来配置一组路由。该路由配置会告诉路由器该如何导航。
|
||||
|
||||
Use the `RouterModule.forRoot` method to define a set of routes. Also, import this `RouterModule` to the `imports` array of the main module, `AppModule`.
|
||||
|
||||
使用 `RouterModule.forRoot` 方法来定义一组路由。同时，把其返回值导入到主模块 `AppModule` 的 `imports` 数组中。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**Note:** Use the `RouterModule.forRoot` method in the root module, `AppModule`, to register top-level application routes and providers. For feature modules, call the `RouterModule.forChild` method to register additional routes.
|
||||
|
||||
**注意：**在根模块 `AppModule` 中使用 `RouterModule.forRoot` 方法来注册一些顶级应用路由和提供商。对于特性模块，调用 `RouterModule.forChild` 方法来注册其它路由。
|
||||
|
||||
</div>
|
||||
|
||||
The following configuration defines the possible routes for the application.
|
||||
|
||||
下列配置定义了应用程序中可能的路由。
|
||||
|
||||
<code-example path="animations/src/app/app.module.ts" linenums="false" header="src/app/app.module.ts" region="route-animation-data" language="typescript">
|
||||
</code-example>
|
||||
|
||||
The `home` and `about` paths are associated with the `HomeComponent` and `AboutComponent` views. The route configuration tells the Angular router to instantiate the `HomeComponent` and `AboutComponent` views when the navigation matches the corresponding path.
|
||||
|
||||
`home` 和 `about` 路径分别关联着 `HomeComponent` 和 `AboutComponent` 视图。该路由配置告诉 Angular 路由器当导航匹配了相应的路径时，就实例化 `HomeComponent` 和 `AboutComponent` 视图。
|
||||
|
||||
In addition to `path` and `component`, the `data` property of each route defines the key animation-specific configuration associated with a route. The `data` property value is passed into `AppComponent` when the route changes. You can also pass additional data in route config that is consumed within the animation. The data property value has to match the transitions defined in the `routeAnimation` trigger, which we'll define later.
|
||||
|
||||
除了 `path`、`component` 之外，每个路由定义中的 `data` 属性也定义了与此路由有关的动画配置。当路由变化时，`data` 属性的值就会传给 `AppComponent`。你还可以在路由配置中传递其它的值供路由的动画使用。`data` 属性的值必须满足 `routeAnimation` 中定义的转场动画的要求，稍后我们就会定义它。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**Note:** The `data` property names that you use can be arbitrary. For example, the name *animation* used in the example above is an arbitrary choice.
|
||||
|
||||
**注意：**这个 `data` 中的属性名可以是任意的。例如，上面例子中使用的名字 *animation* 就是随便起的。
|
||||
|
||||
</div>
|
||||
|
||||
## Router outlet
|
||||
|
||||
## 路由出口
|
||||
|
||||
After configuring the routes, tell the Angular router where to render the views when matched with a route. You can set a router outlet by inserting a `<router-outlet>` container inside the root `AppComponent` template.
|
||||
|
||||
配置好路由之后，还要告诉 Angular 路由器当路由匹配时，要把视图渲染到那里。你可以通过在根组件 `AppComponent` 的模板中插入一个 `<router-outlet>` 容器来指定路由出口的位置。
|
||||
|
||||
The `<router-outlet>` container has an attribute directive that contains data about active routes and their states, based on the `data` property that we set in the route configuration.
|
||||
|
||||
`<router-outlet>` 容器具有一个属性型指令，它包含关于活动路由及其状态的数据，这些数据会基于我们在路由配置中设置的 `data` 属性。
|
||||
|
||||
<code-example path="animations/src/app/app.component.html" header="src/app/app.component.html" region="route-animations-outlet">
|
||||
</code-example>
|
||||
|
||||
`AppComponent` defines a method that can detect when a view changes. The method assigns an animation state value to the animation trigger (`@routeAnimation`) based on the route configuration `data` property value. Here's an example of an `AppComponent` method that detects when a route change happens.
|
||||
|
||||
`AppComponent` 中定义了一个可以检测视图何时发生变化的方法，该方法会基于路由配置的 `data` 属性值，将动画状态值赋值给动画触发器（`@routeAnimation`）。下面就是一个 `AppComponent` 中的范例方法，用于检测路由在何时发生了变化。
|
||||
|
||||
<code-example path="animations/src/app/app.component.ts" linenums="false" header="src/app/app.component.ts" region="prepare-router-outlet" language="typescript">
|
||||
</code-example>
|
||||
|
||||
Here, the `prepareRoute()` method takes the value of the output directive (established through `#outlet="outlet"`) and returns a string value representing the state of the animation based on the custom data of the current active route. You can use this data to control which transition to execute for each route.
|
||||
|
||||
这里的 `prepareRoute()` 方法会获取这个 outlet 指令的值（通过 `#outlet="outlet"`），并根据当前活动路由的自定义数据返回一个表示动画状态的字符串值。你可以使用这个数据来控制各个路由之间该执行哪个转场。
|
||||
|
||||
## Animation definition
|
||||
|
||||
## 动画定义
|
||||
|
||||
Animations can be defined directly inside your components. For this example we are defining the animations in a separate file, which allows us to re-use the animations.
|
||||
|
||||
动画可以直接在组件中定义。对于此范例，我们会在独立的文件中定义动画，这让我们可以复用这些动画。
|
||||
|
||||
The following code snippet defines a reusable animation named `slideInAnimation`.
|
||||
|
||||
下面的代码片段定义了一个名叫 `slideInAnimation` 的可复用动画。
|
||||
|
||||
<code-example path="animations/src/app/animations.ts" linenums="false" header="src/app/animations.ts" region="route-animations" language="typescript">
|
||||
</code-example>
|
||||
|
||||
The animation definition does several things:
|
||||
|
||||
该动画定义做了如下事情：
|
||||
|
||||
* Defines two transitions. A single trigger can define multiple states and transitions.
|
||||
|
||||
定义两个转场。每个触发器都可以定义多个状态和多个转场。
|
||||
|
||||
* Adjusts the styles of the host and child views to control their relative positions during the transition.
|
||||
|
||||
调整宿主视图和子视图的样式，以便在转场期间，控制它们的相对位置。
|
||||
|
||||
* Uses `query()` to determine which child view is entering and which is leaving the host view.
|
||||
|
||||
使用 `query()` 来确定哪个子视图正在进入或离开宿主视图。
|
||||
|
||||
A route change activates the animation trigger, and a transition matching the state change is applied.
|
||||
|
||||
路由的变化会激活这个动画触发器，并应用一个与该状态变更相匹配的转场。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
**Note:** The transition states must match the `data` property value defined in the route configuration.
|
||||
|
||||
**注意：**这些转场状态必须和路由配置中定义的 `data` 属性的值相一致。
|
||||
|
||||
</div>
|
||||
|
||||
Make the animation definition available in your application by adding the reusable animation (`slideInAnimation`) to the `animations` metadata of the `AppComponent`.
|
||||
|
||||
通过将可复用动画 `slideInAnimation` 添加到 `AppComponent` 的 `animations` 元数据中，可以让此动画定义能用在你的应用中。
|
||||
|
||||
<code-example path="animations/src/app/app.component.ts" linenums="false" header="src/app/app.component.ts" region="define" language="typescript">
|
||||
</code-example>
|
||||
|
||||
### Styling the host and child components
|
||||
|
||||
### 为宿主组件和子组件添加样式
|
||||
|
||||
During a transition, a new view is inserted directly after the old one and both elements appear on screen at the same time. To prevent this, apply additional styling to the host view, and to the removed and inserted child views. The host view must use relative positioning, and the child views must use absolute positioning. Adding styling to the views animates the containers in place, without the DOM moving things around.
|
||||
|
||||
在转场期间，新视图将直接插入在旧视图后面，并且这两个元素会同时出现在屏幕上。要防止这种情况，就要为宿主视图以及要删除和插入的子视图指定一些额外的样式。宿主视图必须使用相对定位模式，而子视图则必须使用绝对定位模式。在这些视图中添加样式，就可以让容器就地播放动画，而不会让 DOM 移动。
|
||||
|
||||
<code-example path="animations/src/app/animations.ts" linenums="false" header="src/app/animations.ts" region="style-view" language="typescript">
|
||||
</code-example>
|
||||
|
||||
### Querying the view containers
|
||||
|
||||
### 查询视图的容器
|
||||
|
||||
Use the `query()` method to find and animate elements within the current host component. The `query(":enter")` statement returns the view that is being inserted, and `query(":leave")` returns the view that is being removed.
|
||||
|
||||
使用 `query()` 方法可以找出当前宿主组件中的动画元素。`query(":enter")` 语句会返回已插入的视图，`query(":leave")` 语句会返回已移除的视图。
|
||||
|
||||
Let's assume that we are routing from the *Home => About*.
|
||||
|
||||
我们假设正在从 *Home* 转场到 *About*，`Home => About`。
|
||||
|
||||
<code-example path="animations/src/app/animations.ts" linenums="false" header="src/app/animations.ts" region="query" language="typescript" linenums="false">
|
||||
</code-example>
|
||||
|
||||
The animation code does the following after styling the views:
|
||||
|
||||
在设置了视图的样式之后，动画代码会执行如下操作：
|
||||
|
||||
* `query(':enter style({ left: '-100%'})` matches the view that is added and hides the newly added view by positioning it to the far left.
|
||||
|
||||
`query(':enter style({ left: '-100%'})` 会匹配添加的视图，并通过将其添加到最左侧来隐藏新添加的视图。
|
||||
|
||||
* Calls `animateChild()` on the view that is leaving, to run its child animations.
|
||||
|
||||
在正在离开的视图上调用 `animateChild()`，来运行其子动画。
|
||||
|
||||
* Uses `group()` function to make the inner animations run in parallel.
|
||||
|
||||
使用 `group()` 函数来并行运行内部动画。
|
||||
|
||||
* Within the `group()` function:
|
||||
|
||||
在 `group()` 函数中：
|
||||
|
||||
* Queries the view that is removed and animates it to slide far to the right.
|
||||
* Slides in the new view by animating the view with an easing function and duration. </br>
|
||||
|
||||
查询已移除的视图，并让它从右侧滑出。
|
||||
|
||||
* Slides in the new view by animating the view with an easing function and duration. <br />
|
||||
This animation results in the `about` view sliding from the left to right.
|
||||
|
||||
使用缓动函数和持续时间定义的动画，让这个新视图滑入。<br />
|
||||
此动画将导致 `about` 视图从左向右滑动。
|
||||
|
||||
* Calls the `animateChild()` method on the new view to run its child animations after the main animation completes.
|
||||
|
||||
当主动画完成之后，在这个新视图上调用 `animateChild()` 方法，以运行其子动画。
|
||||
|
||||
You now have a basic routable animation that animates routing from one view to another.
|
||||
|
||||
你现在有了一个基本的路由动画，可以在从一个视图路由到另一个视图时播放动画。
|
||||
|
||||
## More on Angular animations
|
||||
|
||||
## 关于 Angular 动画的更多知识
|
||||
|
||||
You may also be interested in the following:
|
||||
|
||||
你可能还对下列内容感兴趣：
|
||||
|
||||
* [Introduction to Angular animations](guide/animations)
|
||||
|
||||
[Angular 动画简介](guide/animations)
|
||||
|
||||
* [Transition and triggers](guide/transition-and-triggers)
|
||||
|
||||
[转场与触发器](guide/transition-and-triggers)
|
||||
|
||||
* [Complex animation sequences](guide/complex-animation-sequences)
|
||||
|
||||
[复杂动画序列](guide/complex-animation-sequences)
|
||||
|
||||
* [Reusable animations](guide/reusable-animations)
|
||||
|
||||
[可复用动画](guide/reusable-animations)
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@ You can define more than one animation trigger for a component. You can attach a
|
|||
|
||||
Each time an animation is triggered in Angular, the parent animation always get priority and child animations are blocked. In order for a child animation to run, the parent animation must query each of the elements containing child animations and then allow the animations to run using the [`animateChild()`](https://angular.io/api/animations/animateChild) function.
|
||||
|
||||
每次在 Angular 中触发动画时，父动画始终会优先，而子动画会被阻塞。为了运行子动画，父动画必须查询出包含子动画的每个元素，然后使用 [`animateChild()`](/api/animations/animateChild) 函数来运行它们。
|
||||
每次在 Angular 中触发动画时，父动画始终会优先，而子动画会被阻塞。为了运行子动画，父动画必须查询出包含子动画的每个元素，然后使用 [`animateChild()`](https://angular.cn/api/animations/animateChild) 函数来运行它们。
|
||||
|
||||
#### Disabling an animation on an HTML element
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ However, selective child animations can still be run on a disabled parent in one
|
|||
|
||||
* A parent animation can use the [`query()`](https://angular.io/api/animations/query) function to collect inner elements located in disabled areas of the HTML template. Those elements can still animate.
|
||||
|
||||
父动画可以使用 [`query()`](/api/animations/query) 函数来收集 HTML 模板中位于禁止动画区域内部的元素。这些元素仍然可以播放动画。
|
||||
父动画可以使用 [`query()`](https://angular.cn/api/animations/query) 函数来收集 HTML 模板中位于禁止动画区域内部的元素。这些元素仍然可以播放动画。
|
||||
|
||||
* A subanimation can be queried by a parent and then later animated with the `animateChild()` function.
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ To check your app's version of Angular: From within your project directory, use
|
|||
|
||||
The most recent stable released version of Angular appears in the [Angular documentation](https://angular.io/docs "Angular documentation") at the bottom of the left side navigation. For example, `stable (v5.2.9)`.
|
||||
|
||||
在 [Angular 文档站](https://angular.io/docs "Angular documentation")左侧导航栏的底部可以看到 Angular 最新的稳定版版本号。比如 `stable (v5.2.9)`。
|
||||
在 [Angular 文档站](https://angular.cn/docs "Angular documentation")左侧导航栏的底部可以看到 Angular 最新的稳定版版本号。比如 `stable (v5.2.9)`。
|
||||
|
||||
You can also find the most current version of Angular by using the CLI command [`ng update`](cli/update). By default, `ng update` (without additional arguments) lists the updates that are available to you.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue