Skip to content

Commit ddc8ecf

Browse files
lacolacolacolaco
committed
fix(docs): update animation file paths to match origin
1 parent ca6ea86 commit ddc8ecf

File tree

2 files changed

+29
-29
lines changed

2 files changed

+29
-29
lines changed

‎adev-ja/src/content/guide/animations/complex-sequences.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ HELPFUL: [`group()`](api/animations/group) 関数は、アニメーション化
6767

6868
次の例は、`:enter` と `:leave` の両方で [`group()`](api/animations/group) を使用し、2つの異なるタイミング設定を適用します。これにより、同じ要素に2つの独立したアニメーションを並行して適用できます。
6969

70-
<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" region="animationdef"/>
70+
<docs-code header="hero-list-groups.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.ts" region="animationdef"/>
7171

7272
## 順次アニメーションと並行アニメーション {#sequential-vs-parallel-animations}
7373

‎adev-ja/src/content/guide/animations/css.en.md‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ Similarly, you can use `transition-duration`, `transition-delay`, and `transitio
5252

5353
Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. Here's an example:
5454

55-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
56-
<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
57-
<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
58-
<docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
55+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
56+
<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
57+
<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
58+
<docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
5959
</docs-code-multifile>
6060

6161
## Transition and Triggers
@@ -64,10 +64,10 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p
6464

6565
You can use css-grid to animate to auto height.
6666

67-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
68-
<docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
69-
<docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
70-
<docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css" />
67+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
68+
<docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
69+
<docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
70+
<docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css" />
7171
</docs-code-multifile>
7272

7373
If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -76,18 +76,18 @@ If you don't have to worry about supporting all browsers, you can also check out
7676

7777
You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view.
7878

79-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
80-
<docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
81-
<docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
82-
<docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css" />
79+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
80+
<docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
81+
<docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
82+
<docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css" />
8383
</docs-code-multifile>
8484

8585
Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view.
8686

87-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
88-
<docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
89-
<docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
90-
<docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css" />
87+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
88+
<docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
89+
<docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
90+
<docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css" />
9191
</docs-code-multifile>
9292

9393
For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -96,10 +96,10 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and
9696

9797
Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior.
9898

99-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
100-
<docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
101-
<docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
102-
<docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
99+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
100+
<docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
101+
<docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
102+
<docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
103103
</docs-code-multifile>
104104

105105
### Disabling an animation or all animations
@@ -147,10 +147,10 @@ Animations are often more complicated than just a simple fade in or fade out. Yo
147147

148148
One common effect is to stagger the animations of each item in a list to create a cascade effect. This can be accomplished by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
149149

150-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
151-
<docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
152-
<docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
153-
<docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
150+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
151+
<docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
152+
<docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
153+
<docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
154154
</docs-code-multifile>
155155

156156
### Parallel Animations
@@ -171,10 +171,10 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu
171171

172172
Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example below.
173173

174-
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
175-
<docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
176-
<docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
177-
<docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
174+
<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
175+
<docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
176+
<docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
177+
<docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
178178
</docs-code-multifile>
179179

180180
## Programmatic control of animations

0 commit comments

Comments
 (0)