docs(animations): update copy #2379

kapunahelewong · 2016-09-16T19:44:17Z

Copy edits for the Animations page.

kwalrath · 2016-09-19T21:35:05Z

public/docs/ts/latest/guide/animations.jade


    For other browsers, a polyfill is required. Grab
-    [`web-animations.min.js` from here](https://github.com/web-animations/web-animations-js) and
+    [`web-animations.min.js` from Github](https://github.com/web-animations/web-animations-js) and


Github -> GitHub
(global)

kwalrath · 2016-09-19T21:35:28Z

public/docs/ts/latest/guide/animations.jade

-  * [Animation callbacks](#animation-callbacks)
+  # Contents
+
+  * [Quickstart example: Transitioning between two states](#example-transitioning-between-states).


Let's not call it "quickstart", since I think of that as the example in the QuickStart section. Maybe just "Simple"? Or drop the word entirely?

Dropped "quickstart" in keeping with the other items in the list. Done.

kwalrath · 2016-09-19T21:37:54Z

public/docs/ts/latest/guide/animations.jade

 figure
  img(src="/resources/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px" )
 :marked
-  Let's build a simple animation that transitions an element between two states
+  Build a simple animation that transitions an element between two states


I'm not crazy about phrasing this as a command, since they don't know how to do this. I'd prefer "Let's build", but maybe you can think of something better.

Looking at your changes, I don't see this comment addressed yet.

You're right. Missed it! Changed it to "You can build..."

kwalrath · 2016-09-19T21:42:44Z

public/docs/ts/latest/guide/animations.jade

-  We now have an animation defined but it is not yet used anywhere. We can change that by
-  attaching it to one or more elements in the component's template using the "`[@triggerName]`"
-  syntax:
+  Now, using the "`[@triggerName]`" syntax, attach the animation that you just defined to


Let's drop the " around [@triggerName].

kwalrath · 2016-09-19T21:43:49Z

public/docs/ts/latest/guide/animations.jade

-  or `active`, since that's what we have defined animation states for.
+  Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
+  the repeated elements animates independently. The value of the
+  attribute is bound to the expression `hero.state`. It is always either `inactive`


. It is -> and is

(to improve flow, reduce choppiness)

kwalrath · 2016-09-19T22:15:04Z

public/docs/ts/latest/guide/animations.jade

-  and decelerates during its runtime. For example, using an `ease-in` function means
-  the animation begins relatively slowly but then picks up speed as it progresses. We
+  and decelerates during its runtime. For example, an `ease-in` function causes
+  the animation to begin relatively slowly and picks up speed as it progresses. You


and picks -> but pick

kwalrath · 2016-09-19T22:17:21Z

public/docs/ts/latest/guide/animations.jade

-  For each keyframe, we can specify an *offset* that defines at which point
-  in the animation that keyframe applies. The offset is a number between zero,
+  For each keyframe, you specify an *offset* that defines at which point
+  in the animation keyframe applies. The offset is a number between zero,


keyframe -> that keyframe
(or "the keyframe")

kwalrath · 2016-09-19T22:18:03Z

public/docs/ts/latest/guide/animations.jade

 figure
  img(src="/resources/images/devguide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px" )
 :marked
-  We've already seen how we can animate multiple style properties at the same time:
-  Just put all of them into the same `style()` definition!
+  You've seen how you to animate multiple style properties at the same time:


you to -> to

kwalrath · 2016-09-19T22:18:54Z

public/docs/ts/latest/guide/animations.jade

-  For this we can use animation *groups*. In this example we use groups both on
-  enter and leave so that we can use two different timing configurations. Both
+  For this you can use animation *groups*. In this example, using groups both on
+  enter and leave allow for two different timing configurations. Both


allow -> allows
(since it's "using", not "groups", that's the subject of this verb)

You're good! Done. :)

kwalrath · 2016-09-19T22:19:09Z

public/docs/ts/latest/guide/animations.jade

-  For this we can use animation *groups*. In this example we use groups both on
-  enter and leave so that we can use two different timing configurations. Both
+  For this you can use animation *groups*. In this example, using groups both on
+  enter and leave allow for two different timing configurations. Both
  are applied to the same element in parallel, but run independent of each other:


independent -> independently

kwalrath · 2016-09-19T22:21:07Z

I was probably too picky, but in general this looks good.

kwalrath · 2016-09-20T19:44:35Z

public/docs/ts/latest/guide/animations.jade

  one or more elements in the component's template.

 +makeExample('animations/ts/app/hero-list-basic.component.ts', 'template')(format=".")

 :marked
  Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
  the repeated elements animates independently. The value of the
-  attribute is bound to the expression `hero.state`. It is always either `inactive`
-  or `active`.
+  attribute is bound to the expression `hero.state` and is always either `active`/`inactive`.


/ -> or

(/ can mean too many things, including division, and-or, ...)

kwalrath · 2016-09-20T19:46:26Z

public/docs/ts/latest/guide/animations.jade

 figure
  img(src="/resources/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px" )
 :marked
-  Let's build a simple animation that transitions an element between two states
+  Build a simple animation that transitions an element between two states


Looking at your changes, I don't see this comment addressed yet.

kwalrath

2 tiny comments, but this looks great. If you can fix these now before I commit, that'd be great. Otherwise, I'll commit and make the couple of changes myself.

kwalrath · 2016-09-20T19:48:37Z

public/docs/ts/latest/guide/animations.jade

  the value as a string with the appropriate suffix:

  * `'50px'`
  * `'3em'`
  * `'100%'`

-  Define most dimensional properties as a number in pixels:
+  If you don't provide a unit when specifying dimension, Angular will assume the default of `px`:


Much better wording! Nit:

will assume -> assumes

googlebot added the CLA: yes label Sep 16, 2016

kwalrath reviewed Sep 19, 2016

View reviewed changes

docs(animations): update copy

a8bd94f

kapunahelewong force-pushed the kwong-animations branch from 81b2bb9 to 3bb6dac Compare September 20, 2016 18:14

docs(animations): update copy 2nd pass

3bb6dac

kwalrath reviewed Sep 20, 2016

View reviewed changes

copy edits

c2fa4f0

kwalrath approved these changes Sep 20, 2016

View reviewed changes

kwalrath merged commit 7252bd1 into angular:master Sep 20, 2016

kwalrath deleted the kwong-animations branch September 20, 2016 21:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(animations): update copy #2379

docs(animations): update copy #2379

kapunahelewong commented Sep 16, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016 •

edited

Loading

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kwalrath Sep 20, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath Sep 19, 2016

kapunahelewong Sep 20, 2016

kwalrath commented Sep 19, 2016

kwalrath Sep 20, 2016 •

edited

Loading

kapunahelewong Sep 20, 2016

kwalrath Sep 20, 2016

kwalrath left a comment

kwalrath Sep 20, 2016 •

edited

Loading

docs(animations): update copy #2379

docs(animations): update copy #2379

Conversation

kapunahelewong commented Sep 16, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwalrath Sep 19, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwalrath commented Sep 19, 2016

kwalrath Sep 20, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwalrath left a comment

Choose a reason for hiding this comment

kwalrath Sep 20, 2016 • edited Loading

Choose a reason for hiding this comment

kwalrath Sep 19, 2016 •

edited

Loading

kwalrath Sep 20, 2016 •

edited

Loading

kwalrath Sep 20, 2016 •

edited

Loading