Skip to content

Commit a2d6598

Browse files
ist-h-iist-h-i
authored
feat(docs) translate guide/animations/css to japanese (#1138)
* Translate guide/animations/css to Japanese * Fix link for the guide of enter and leave animation * Fix bullet style to plane text style * Fix linked text * Update css.md
1 parent 6e87f26 commit a2d6598

2 files changed

Lines changed: 253 additions & 62 deletions

File tree

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

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# Animating your Application with CSS
2+
3+
CSS offers a robust set of tools for you to create beautiful and engaging animations within your application.
4+
5+
## How to write animations in native CSS
6+
7+
If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
8+
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
9+
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
10+
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
11+
[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)
12+
13+
and a couple of videos:
14+
[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
15+
[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
16+
17+
Check some of these various guides and tutorials out, and then come back to this guide.
18+
19+
## Creating Reusable Animations
20+
21+
You can create reusable animations that can be shared across your application using `@keyframes`. Define keyframe animations in a shared CSS file, and you'll be able to re-use those keyframe animations wherever you want within your application.
22+
23+
<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-shared"/>
24+
25+
Adding the class `animated-class` to an element would trigger the animation on that element.
26+
27+
## Animating a Transition
28+
29+
### Animating State and Styles
30+
31+
You may want to animate between two different states, for example when an element is opened or closed. You can accomplish this by using CSS classes either using a keyframe animation or transition styling.
32+
33+
<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-states"/>
34+
35+
Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings).
36+
37+
You can see similar examples in the template guide for [animating styles directly](guide/templates/binding#css-style-properties).
38+
39+
### Transitions, Timing, and Easing
40+
41+
Animating often requires adjusting timing, delays and easeing behaviors. This can be done using several css properties or shorthand properties.
42+
43+
Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
44+
45+
<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-timing"/>
46+
47+
Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`.
48+
49+
<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="transition-timing"/>
50+
51+
### Triggering an Animation
52+
53+
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:
54+
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"/>
59+
</docs-code-multifile>
60+
61+
## Transition and Triggers
62+
63+
### Animating Auto Height
64+
65+
You can use css-grid to animate to auto height.
66+
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" />
71+
</docs-code-multifile>
72+
73+
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.
74+
75+
### Animate entering and leaving a view
76+
77+
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.
78+
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" />
83+
</docs-code-multifile>
84+
85+
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.
86+
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" />
91+
</docs-code-multifile>
92+
93+
For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
94+
95+
### Animating increment and decrement
96+
97+
Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior.
98+
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" />
103+
</docs-code-multifile>
104+
105+
### Disabling an animation or all animations
106+
107+
If you'd like to disable the animations that you've specified, you have multiple options.
108+
109+
1. Create a custom class that forces animation and transition to `none`.
110+
111+
```css
112+
.no-animation {
113+
animation: none !important;
114+
transition: none !important;
115+
}
116+
```
117+
118+
Applying this class to an element prevents any animation from firing on that element. You could alternatively scope this to your entire DOM or section of your DOM to enforce this behavior. However, this prevents animation events from firing. If you are awaiting animation events for element removal, this solution won't work. A workaround is to set durations to 1 millisecond instead.
119+
120+
2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation.
121+
122+
3. Prevent adding animation classes programatically
123+
124+
### Animation Callbacks
125+
126+
If you have actions you would like to execute at certain points during animations, there are a number of available events you can listen to. Here's a few of them.
127+
128+
[`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)
129+
[`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
130+
[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event)
131+
[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)
132+
133+
[`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event)
134+
[`OnTransitionRun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event)
135+
[`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)
136+
[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)
137+
138+
The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs.
139+
140+
NOTE: Be aware of bubbling issues with these callbacks. If you are animating children and parents, the events bubble up from children to parents. Consider stopping propagation or looking at more details within the event to determine if you're responding to the desired event target rather than an event bubbling up from a child node. You can examine the `animationname` property or the properties being transitioned to verify you have the right nodes.
141+
142+
## Complex Sequences
143+
144+
Animations are often more complicated than just a simple fade in or fade out. You may have lots of complicated sequences of animations you may want to run. Let's take a look at some of those possible scenarios.
145+
146+
### Staggering animations in a list
147+
148+
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.
149+
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" />
154+
</docs-code-multifile>
155+
156+
### Parallel Animations
157+
158+
You can apply multiple animations to an element at once using the `animation` shorthand property. Each can have their own durations and delays. This allows you to compose animations together and create complicated effects.
159+
160+
```css
161+
.target-element {
162+
animation:
163+
rotate 3s,
164+
fade-in 2s;
165+
}
166+
```
167+
168+
In this example, the `rotate` and `fade-in` animations fire at the same time, but have different durations.
169+
170+
### Animating the items of a reordering list
171+
172+
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.
173+
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" />
178+
</docs-code-multifile>
179+
180+
## Programmatic control of animations
181+
182+
You can retrieve animations off an element directly using [`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations). This returns an array of every [`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation) on that element. You can use the `Animation` API to do much more than you could with what the `AnimationPlayer` from the animations package offered. From here you can `cancel()`, `play()`, `pause()`, `reverse()` and much more. This native API should provide everything you need to control your animations.
183+
184+
## More on Angular animations
185+
186+
You might also be interested in the following:
187+
188+
<docs-pill-row>
189+
<docs-pill href="guide/animations" title="Enter and Leave animations"/>
190+
<docs-pill href="guide/routing/route-transition-animations" title="Route transition animations"/>
191+
</docs-pill-row>

0 commit comments

Comments
 (0)