third_party/polymer/components-chromium/core-animation/core-animation.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components-chromium/core-animation/core-animation.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 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:

« no previous file with comments | « third_party/polymer/components-chromium/core-animation/bower.json ('k') | third_party/polymer/components-chromium/core-animation/core-animation-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

6 Code distributed by Google as part of the polymer project is also

7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

8 --><html><head><link rel="import" href="../polymer/polymer.html">

9 <link rel="import" href="web-animations.html">

10

11 <!--

12 @group Polymer Core Elements

13

14 `core-animation` is a convenience element to use web animations with Polymer ele ments. It

15 allows you to create a web animation declaratively. You can extend this class to create

16 new types of animations and combine them with `core-animation-group`.

17

18 Example to create animation to fade out an element over 500ms:

19

20 <core-animation id="fadeout" duration="500">

21 <core-animation-keyframe>

22 <core-animation-prop name="opacity" value="1"></core-animation-prop>

23 </core-animation-keyframe>

24 <core-animation-keyframe>

25 <core-animation-prop name="opacity" value="0"></core-animation-prop>

26 </core-animation-keyframe>

27 </core-animation>

28

29 <div id="el">Fade me out</div>

30

31 <script>

32 var animation = document.getElementById('fadeout');

33 animation.target = document.getElementById('el');

34 animation.play();

35 </script>

36

37 Or do the same imperatively:

38

39 var animation = new CoreAnimation();

40 animation.duration = 500;

41 animation.keyframes = [

42 {opacity: 1},

43 {opacity: 0}

44 ];

45 animation.target = document.getElementById('el');

46 animation.play();

47

48 You can also provide a javascript function instead of keyframes to the animation . This

49 behaves essentially the same as `requestAnimationFrame`:

50

51 var animation = new CoreAnimation();

52 animation.customEffect = function(timeFraction, target, animation) {

53 // do something custom

54 };

55 animation.play();

56

57 Elements that are targets to a `core-animation` are given the `core-animation-ta rget` class.

58

59 @element core-animation

60 @status beta

61 @homepage github.io

62 -->

63 </head><body><polymer-element name="core-animation" constructor="CoreAnimation" attributes="target keyframes customEffect composite duration fill easing iterati onStart iterationCount delay direction autoplay targetSelector" assetpath="">

64

65 </polymer-element>

66

67 <!--

68 `core-animation-keyframe` represents a keyframe in a `core-animation`. Use them as children of

69 `core-animation` elements to create web animations declaratively. If the `offset ` property is

70 unset, the keyframes will be distributed evenly within the animation duration. U se

71 `core-animation-prop` elements as children of this element to specify the CSS pr operties for

72 the animation.

73

74 @element core-animation-keyframe

75 @status beta

76 @homepage github.io

77 -->

78 <polymer-element name="core-animation-keyframe" attributes="offset" assetpath="" >

79

80 </polymer-element>

81

82 <!--

83 `core-animation-prop` represents a CSS property and value pair to use with

84 `core-animation-keyframe`.

85

86 @element core-animation-prop

87 @status beta

88 @homepage github.io

89 -->

90 <polymer-element name="core-animation-prop" attributes="name value" assetpath="" >

91

92 </polymer-element>

93 <script charset="utf-8" src="core-animation-extracted.js"></script></body></html >

OLD	NEW