Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(16)

Side by Side Diff: third_party/polymer/components/web-animations-js/README.md

Issue 3010683002: Update Polymer components. (Closed)
Patch Set: Rebase Created 3 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 1
2 Quick Start
3 -----------
4
5 To provide native Chrome Web Animation features (`Element.animate` and Playback
6 Control) in other browsers, use `web-animations.min.js`. To explore all of the
7 proposed Web Animations API, use `web-animations-next.min.js`.
8
9 What is Web Animations? 2 What is Web Animations?
10 ----------------------- 3 -----------------------
11 4
12 Web Animations is a new JavaScript API for driving animated content on the web. 5 A new JavaScript API for driving animated content on the web. By unifying
13 By unifying the animation features of SVG and CSS, Web Animations unlocks 6 the animation features of SVG and CSS, Web Animations unlocks features
14 features previously only usable declaratively, and exposes powerful, 7 previously only usable declaratively, and exposes powerful, high-performance
15 high-performance animation capabilities to developers. 8 animation capabilities to developers.
16 9
17 For more details see the 10 What is in this repository?
18 [W3C specification](http://w3c.github.io/web-animations/). 11 ---------------------------
19 12
20 What is the polyfill? 13 A JavaScript implementation of the Web Animations API that provides Web
21 --------------------- 14 Animation features in browsers that do not support it natively. The polyfill
15 falls back to the native implementation when one is available.
22 16
23 The polyfill is a JavaScript implementation of the Web Animations API. It is 17 Quick start
24 supported on modern versions of all major browsers, including: 18 -----------
25 19
26 * Chrome 20 Here's a simple example of an animation that fades and scales a `<div>`.
27 * Firefox 27+ 21 [Try it as a live demo.](http://jsbin.com/yageyezabo/edit?html,js,output)
28 * IE10+ (including Edge)
29 * Safari (iOS) 7.1+
30 * Safari (Mac) 9+
31
32 Getting Started
33 ---------------
34
35 Here's a simple example of an animation that scales and changes the opacity of
36 a `<div>` over 0.5 seconds. The animation alternates producing a pulsing
37 effect.
38 22
39 ```html 23 ```html
24 <!-- Include the polyfill -->
40 <script src="web-animations.min.js"></script> 25 <script src="web-animations.min.js"></script>
41 <div class="pulse" style="width:150px;">Hello world!</div> 26
27 <!-- Set up a target to animate -->
28 <div class="pulse" style="width: 150px;">Hello world!</div>
29
30 <!-- Animate! -->
42 <script> 31 <script>
43 var elem = document.querySelector('.pulse'); 32 var elem = document.querySelector('.pulse');
44 var animation = elem.animate([ 33 var animation = elem.animate({
45 {opacity: 0.5, transform: "scale(0.5)"}, 34 opacity: [0.5, 1],
46 {opacity: 1.0, transform: "scale(1)"} 35 transform: ['scale(0.5)', 'scale(1)'],
47 ], { 36 }, {
48 direction: 'alternate', 37 direction: 'alternate',
49 duration: 500, 38 duration: 500,
50 iterations: Infinity 39 iterations: Infinity,
51 }); 40 });
52 </script> 41 </script>
53 ``` 42 ```
54 43
55 Web Animations supports off-main-thread animations, and also allows procedural 44 Documentation
56 generation of animations and fine-grained control of animation playback. See 45 -------------
57 <http://web-animations.github.io> for ideas and inspiration - or [web-animations -codelabs](https://github.com/web-animations/web-animations-codelabs).
58 46
59 Native Fallback 47 * [Codelab tutorial](https://github.com/web-animations/web-animations-codelabs)
48 * [Examples of usage](/docs/examples.md)
49 * [Live demos](https://web-animations.github.io/web-animations-demos)
50 * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/anima te)
51 * [W3C specification](http://w3c.github.io/web-animations/)
52
53 We love feedback!
54 -----------------
55
56 * For feedback on the API and the specification:
57 * File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new >
58 * Alternatively, send an email to <public-fx@w3.org> with subject line
59 "[web-animations] ... message topic ..."
60 ([archives](http://lists.w3.org/Archives/Public/public-fx/)).
61
62 * For issues with the polyfill, report them on GitHub:
63 <https://github.com/web-animations/web-animations-js/issues/new>.
64
65 Keep up-to-date
60 --------------- 66 ---------------
61 67
62 When the polyfill runs on a browser that implements `Element.animate` and 68 Breaking polyfill changes will be announced on this low-volume mailing list:
63 `Animation` Playback Control it will detect and use the underlying native 69 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru m/web-animations-changes).
64 features.
65 70
66 Different Build Targets 71 More info
67 ----------------------- 72 ---------
68 73
69 ### web-animations.min.js 74 * [Technical details about the polyfill](/docs/support.md)
70 75 * [Browser support](/docs/support.md#browser-support)
71 Tracks the Web Animations features that are supported natively in browsers. 76 * [Fallback to native](/docs/support.md#native-fallback)
72 Today that means Element.animate and Playback Control in Chrome. If you’re not 77 * [Feature list](/docs/support.md#features)
73 sure what features you will need, start with this. 78 * [Feature deprecation and removal processes](/docs/support.md#process-for-b reaking-changes)
74 79 * To test experimental API features, try one of the
75 ### web-animations-next.min.js 80 [experimental targets](/docs/experimental.md)
76
77 Contains all of web-animations.min.js plus features that are still undergoing
78 discussion or have yet to be implemented natively.
79
80 ### web-animations-next-lite.min.js
81
82 A cut down version of web-animations-next, it removes several lesser used
83 property handlers and some of the larger and less used features such as matrix
84 interpolation/decomposition.
85
86 ### Build Target Comparison
87
88 | | web-animations | web-animations-next | web-animations -next-lite |
89 |------------------------|:--------------:|:-------------------:|:-------------- ----------:|
90 |Size (gzipped) | 15KB | 18KB | 15KB |
91 |Element.animate | ✔ | ✔ | ✔ |
92 |Timing input (easings, duration, fillMode, etc.) for animation effects| ✔ | ✔ | ✔ |
93 |Playback control | ✔ | ✔ | ✔ |
94 |Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔ |
95 |Support for animating other CSS properties| ✔ | ✔ | 🚫 |
96 |Matrix fallback for transform animations | ✔ | ✔ | 🚫 |
97 |KeyframeEffect constructor | 🚫 | ✔ | ✔ |
98 |Simple GroupEffects & SequenceEffects | 🚫 | ✔ | ✔ |
99 |Custom Effects | 🚫 | ✔ | ✔ |
100 |Timing input (easings, duration, fillMode, etc.) for groups</div>| 🚫 | 🚫\* | 🚫 |
101 |Additive animation | 🚫\* | 🚫\* | 🚫 |
102 |Motion path | 🚫\* | 🚫\* | 🚫 |
103 |Modifiable keyframe effect timing| 🚫 | 🚫\* | 🚫\* |
104 |Modifiable group timing | 🚫 | 🚫\* | 🚫\* |
105 |Usable inline style\*\* | ✔ | ✔ | 🚫 |
106
107 \* support is planned for these features.
108 \*\* see inline style caveat below.
109
110 Caveats
111 -------
112
113 Some things won’t ever be faithful to the native implementation due to browser
114 and CSS API limitations. These include:
115
116 ### Inline Style
117
118 Inline style modification is the mechanism used by the polyfill to animate
119 properties. Both web-animations and web-animations-next incorporate a module
120 that emulates a vanilla inline style object, so that style modification from
121 JavaScript can still work in the presence of animations. However, to keep the
122 size of web-animations-next-lite as small as possible, the style emulation
123 module is not included. When using this version of the polyfill, JavaScript
124 inline style modification will be overwritten by animations.
125 Due to browser constraints inline style modification is not supported on iOS 7
126 or Safari 6 (or earlier versions).
127
128 ### Prefix handling
129
130 The polyfill will automatically detect the correctly prefixed name to use when
131 writing animated properties back to the platform. Where possible, the polyfill
132 will only accept unprefixed versions of experimental features. For example:
133
134 ```js
135 var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"}, 2000);
136 ```
137
138 will work in all browsers that implement a conforming version of transform, but
139
140 ```js
141 var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 10 0px)"}, 2000);
142 ```
143
144 will not work anywhere.
145
146 API and Specification Feedback
147 ------------------------------
148
149 File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>.
150 Alternatively, send an email to <public-fx@w3.org> with subject line
151 “[web-animations] … message topic …”
152 ([archives](http://lists.w3.org/Archives/Public/public-fx/)).
153
154 Polyfill Issues
155 ---------------
156
157 Report any issues with this implementation on GitHub:
158 <https://github.com/web-animations/web-animations-next/issues/new>.
159
160 Breaking changes
161 ----------------
162
163 When we make a potentially breaking change to the polyfill's API
164 surface (like a rename) we will, where possible, continue supporting the
165 old version, deprecated, for three months, and ensure that there are
166 console warnings to indicate that a change is pending. After three
167 months, the old version of the API surface (e.g. the old version of a
168 function name) will be removed. *If you see deprecation warnings you
169 can't avoid it by not updating*.
170
171 We also announce anything that isn't a bug fix on
172 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru m/web-animations-changes).
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698