| Index: third_party/polymer/components-chromium/core-animation/core-animation.html
|
| diff --git a/third_party/polymer/components-chromium/core-animation/core-animation.html b/third_party/polymer/components-chromium/core-animation/core-animation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a5326af94ef6f078e8c1827a5dbbf7e42b854a34
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-animation/core-animation.html
|
| @@ -0,0 +1,93 @@
|
| +<!--
|
| +Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +--><html><head><link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="web-animations.html">
|
| +
|
| +<!--
|
| +@group Polymer Core Elements
|
| +
|
| +`core-animation` is a convenience element to use web animations with Polymer elements. It
|
| +allows you to create a web animation declaratively. You can extend this class to create
|
| +new types of animations and combine them with `core-animation-group`.
|
| +
|
| +Example to create animation to fade out an element over 500ms:
|
| +
|
| + <core-animation id="fadeout" duration="500">
|
| + <core-animation-keyframe>
|
| + <core-animation-prop name="opacity" value="1"></core-animation-prop>
|
| + </core-animation-keyframe>
|
| + <core-animation-keyframe>
|
| + <core-animation-prop name="opacity" value="0"></core-animation-prop>
|
| + </core-animation-keyframe>
|
| + </core-animation>
|
| +
|
| + <div id="el">Fade me out</div>
|
| +
|
| + <script>
|
| + var animation = document.getElementById('fadeout');
|
| + animation.target = document.getElementById('el');
|
| + animation.play();
|
| + </script>
|
| +
|
| +Or do the same imperatively:
|
| +
|
| + var animation = new CoreAnimation();
|
| + animation.duration = 500;
|
| + animation.keyframes = [
|
| + {opacity: 1},
|
| + {opacity: 0}
|
| + ];
|
| + animation.target = document.getElementById('el');
|
| + animation.play();
|
| +
|
| +You can also provide a javascript function instead of keyframes to the animation. This
|
| +behaves essentially the same as `requestAnimationFrame`:
|
| +
|
| + var animation = new CoreAnimation();
|
| + animation.customEffect = function(timeFraction, target, animation) {
|
| + // do something custom
|
| + };
|
| + animation.play();
|
| +
|
| +Elements that are targets to a `core-animation` are given the `core-animation-target` class.
|
| +
|
| +@element core-animation
|
| +@status beta
|
| +@homepage github.io
|
| +-->
|
| +</head><body><polymer-element name="core-animation" constructor="CoreAnimation" attributes="target keyframes customEffect composite duration fill easing iterationStart iterationCount delay direction autoplay targetSelector" assetpath="">
|
| +
|
| +</polymer-element>
|
| +
|
| +<!--
|
| +`core-animation-keyframe` represents a keyframe in a `core-animation`. Use them as children of
|
| +`core-animation` elements to create web animations declaratively. If the `offset` property is
|
| +unset, the keyframes will be distributed evenly within the animation duration. Use
|
| +`core-animation-prop` elements as children of this element to specify the CSS properties for
|
| +the animation.
|
| +
|
| +@element core-animation-keyframe
|
| +@status beta
|
| +@homepage github.io
|
| +-->
|
| +<polymer-element name="core-animation-keyframe" attributes="offset" assetpath="">
|
| +
|
| +</polymer-element>
|
| +
|
| +<!--
|
| +`core-animation-prop` represents a CSS property and value pair to use with
|
| +`core-animation-keyframe`.
|
| +
|
| +@element core-animation-prop
|
| +@status beta
|
| +@homepage github.io
|
| +-->
|
| +<polymer-element name="core-animation-prop" attributes="name value" assetpath="">
|
| +
|
| +</polymer-element>
|
| +<script charset="utf-8" src="core-animation-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 917523002:
Pull web-animations-js into third-party via the third_party/polymer/reproduce.sh script. Add necess… (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master