Skip to content
Permalink
Browse files

docs(tutorial/step_12): change "click" to "hover"

Should be "hover" not "click", since we trigger the change at "mouseenter", not "click".

Closes #13831
  • Loading branch information
salamanderrex authored and gkalpak committed Jan 23, 2016
1 parent 234053f commit 6406e3b01d6e3ddc54c3c6ec83d4b2a3c6d4f1dc
Showing with 4 additions and 4 deletions.
  1. +4 −4 docs/content/tutorial/step_12.ngdoc
@@ -239,7 +239,7 @@ The name of the starting class is the name of the event that is fired (like `ent
The active class name is the same as the starting class's but with an `-active` suffix.
This two-class CSS naming convention allows the developer to craft an animation, beginning to end.

In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
list and are collapsed back down to **0 pixels** before being removed from the list.
There's also a nice fade-in and fade-out effect that occurs at the same time. All of this is handled
by the CSS transition declarations at the top of the example code above.
@@ -357,10 +357,10 @@ For more on CSS animations, see the
## Animating `ngClass` with JavaScript

Let's add another animation to our application. Switching to our `phone-detail.html` page,
we see that we have a nice thumbnail swapper. By clicking on the thumbnails listed on the page,
we see that we have a nice thumbnail swapper. By hovering over the thumbnails listed on the page,
the profile phone image changes. But how can we change this around to add animations?

Let's think about it first. Basically, when you click on a thumbnail image, you're changing the
Let's think about it first. Basically, when you hover over a thumbnail image, you're changing the
state of the profile image to reflect the newly selected thumbnail image.
The best way to specify state changes within HTML is to use classes.
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.
Whenever a new phone thumbnail is selected, the state changes and the `.active` CSS class is added
to the matching profile image and the animation plays.

Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
have changed the way we display our large image:

__`app/partials/phone-detail.html`.__

0 comments on commit 6406e3b

Please sign in to comment.
You can’t perform that action at this time.