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

Side by Side Diff: third_party/polymer/components/core-transition/core-transition.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/core-transition/bower.json ('k') | third_party/polymer/components/core-transition/core-transition-css.html » ('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 -->

9

10 <!--

11

12 `<core-transition>` is an abstraction of an animation. It is used to implement p luggable

13 transitions, for example in `<core-overlay>`. You can extend this class to creat e a custom

14 animation, instantiate it, and import it where you need the animation.

15

16 All instances of `<core-transition>` are stored in a single database with `type= transition`.

17 For more about the database, please see the documentation for `<core-meta>`.

18

19 Each instance of `<core-transition>` objects are shared across all the clients, so you should

20 not store state information specific to the animated element in the transition. Rather, store

21 it on the element.

22

23 Example:

24

25 my-transition.html:

26

27 <polymer-element name="my-transition" extends="core-transition">

28 <script>

29 go: function(node) {

30 node.style.transition = 'opacity 1s ease-out';

31 node.style.opacity = 0;

32 }

33 </script>

34 </polymer-element>

35

36 <my-transition id="my-fade-out"></my-transition>

37

38 my-transition-demo.html:

39

40 <link href="components/core-meta/core-meta.html" rel="import">

41 <link href="my-transition.html" rel="import">

42

43 <div id="animate-me"></div>

44

45 <script>

46 // Get the core-transition

47 var meta = document.createElement('core-meta');

48 meta.type = 'transition';

49 var transition = meta.byId('my-fade-out');

50

51 // Run the animation

52 var animated = document.getElementById('animate-me');

53 transition.go(animated);

54 </script>

55

56 @group Polymer Core Elements

57 @element core-transition

58 @extends core-meta

59 @status beta

60 @homepage github.io

61 -->

62 <!--

63 Fired when the animation finishes.

64

65 @event core-transitionend

66 @param {Object} detail

67 @param {Object} detail.node The animated node

68 -->

69

70 <link rel="import" href="../core-meta/core-meta.html">

71

72 <polymer-element name="core-transition" extends="core-meta">

73

74 <script>

75 Polymer('core-transition', {

76

77 type: 'transition',

78

79 /**

80 * Run the animation.

81 *

82 * @method go

83 * @param {Node} node The node to apply the animation on

84 * @param {Object} state State info

85 */

86 go: function(node, state) {

87 this.complete(node);

88 },

89

90 /**

91 * Set up the animation. This may include injecting a stylesheet,

92 * applying styles, creating a web animations object, etc.. This

93 *

94 * @method setup

95 * @param {Node} node The animated node

96 */

97 setup: function(node) {

98 },

99

100 /**

101 * Tear down the animation.

102 *

103 * @method teardown

104 * @param {Node} node The animated node

105 */

106 teardown: function(node) {

107 },

108

109 /**

110 * Called when the animation completes. This function also fires the

111 * `core-transitionend` event.

112 *

113 * @method complete

114 * @param {Node} node The animated node

115 */

116 complete: function(node) {

117 this.fire('core-transitionend', null, node);

118 },

119

120 /**

121 * Utility function to listen to an event on a node once.

122 *

123 * @method listenOnce

124 * @param {Node} node The animated node

125 * @param {string} event Name of an event

126 * @param {Function} fn Event handler

127 * @param {Array} args Additional arguments to pass to `fn`

128 */

129 listenOnce: function(node, event, fn, args) {

130 var self = this;

131 var listener = function() {

132 fn.apply(self, args);

133 node.removeEventListener(event, listener, false);

134 }

135 node.addEventListener(event, listener, false);

136 }

137

138 });

139 </script>

140 </polymer-element>

OLD	NEW