docs(animation): Simplify README to follow best practices #1062
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1062 +/- ##
=======================================
Coverage 99.93% 99.93%
=======================================
Files 68 68
Lines 3295 3295
Branches 405 405
=======================================
Hits 3293 3293
Misses 2 2Continue to review full report at Codecov.
|
packages/mdc-animation/README.md
Outdated
| We currently have variables for the following 4 animation curves: | ||
| ### CSS Classes | ||
|
|
||
| Some components have a set typographic style. For example, a raised MDC Checkbox enter and exit curves. |
There was a problem hiding this comment.
I'm a little confused by this line. Could you possibly clarify a bit?
There was a problem hiding this comment.
ooo, ya i copy pasted badly. Updated.
packages/mdc-animation/README.md
Outdated
|
|
||
| Some components have a set typographic style. For example, a raised MDC Checkbox enter and exit curves. | ||
|
|
||
| If you want to animate an element, which is not a Material Design component, you can apply the following CSS classes. |
There was a problem hiding this comment.
element, which -> element that
packages/mdc-animation/README.md
Outdated
| | `$mdc-animation-sharp-curve-timing-function` | `cubic-bezier(.4, 0, .6, 1)` | Animations that cause objects to leave the screen temporarily (e.g. closing a drawer) | | ||
| CSS Class | Description | ||
| --- | --- | ||
| `mdc-animation-deceleration-curve` | Sets the speed curve to deceleration |
There was a problem hiding this comment.
The purpose of these classes might be clearer if we reword the descriptions to something like:
Sets `animation-timing-function` to the deceleration curve
Or, alternatively, we could add a sentence above the table that explains that each of these classes sets the animation-timing-function to a particular speed curve.
There was a problem hiding this comment.
I don't want to put animation-timing-function in the description...because it is an implementation detail. Is there any other way to make this more clear without just documenting the output of the CSS class?
packages/mdc-animation/README.md
Outdated
| property: | ||
| Mixin | Description | ||
| --- | --- | ||
| `mdc-animation-deceleration-curve` | Sets the speed curve to deceleration |
There was a problem hiding this comment.
Ditto my above comment about CSS class descriptions
packages/mdc-animation/README.md
Outdated
|
|
||
| ```scss | ||
| @import "@material/animation/functions"; |
There was a problem hiding this comment.
It might be easier for newcomers if we keep the @import declarations (and add them to the examples that lack them) so they don't have to spend time figuring which path to import.
packages/mdc-animation/README.md
Outdated
| | `getCorrectPropertyName(windowObj: Object, eventType: string)` | Returns a CSS property name. Prefixed if necessary. | | ||
| Method Signature | Description | ||
| --- | --- | ||
| `getCorrectEventName(windowObj, eventType)` | Returns a JavaScript event name, prefixed if necessary | |
There was a problem hiding this comment.
Trailing | can be removed (ditto below)
No description provided.