@@ -239,7 +239,7 @@ The name of the starting class is the name of the event that is fired (like `ent
239
239
The active class name is the same as the starting class's but with an `-active` suffix.
240
240
This two-class CSS naming convention allows the developer to craft an animation, beginning to end.
241
241
242
- In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
242
+ In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
243
243
list and are collapsed back down to **0 pixels** before being removed from the list.
244
244
There's also a nice fade-in and fade-out effect that occurs at the same time. All of this is handled
245
245
by the CSS transition declarations at the top of the example code above.
@@ -357,10 +357,10 @@ For more on CSS animations, see the
357
357
## Animating `ngClass` with JavaScript
358
358
359
359
Let's add another animation to our application. Switching to our `phone-detail.html` page,
360
- we see that we have a nice thumbnail swapper. By clicking on the thumbnails listed on the page,
360
+ we see that we have a nice thumbnail swapper. By hovering over the thumbnails listed on the page,
361
361
the profile phone image changes. But how can we change this around to add animations?
362
362
363
- Let's think about it first. Basically, when you click on a thumbnail image, you're changing the
363
+ Let's think about it first. Basically, when you hover over a thumbnail image, you're changing the
364
364
state of the profile image to reflect the newly selected thumbnail image.
365
365
The best way to specify state changes within HTML is to use classes.
366
366
Much like before, how we used a CSS class to specify an animation, this time the animation will
@@ -369,7 +369,7 @@ occur whenever the CSS class itself changes.
369
369
Whenever a new phone thumbnail is selected, the state changes and the `.active` CSS class is added
370
370
to the matching profile image and the animation plays.
371
371
372
- Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
372
+ Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
373
373
have changed the way we display our large image:
374
374
375
375
__`app/partials/phone-detail.html`.__
0 commit comments