bower_components/core-transition/core-transition-css.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: bower_components/core-transition/core-transition-css.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Created 5 years, 11 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

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-css>` implements CSS transitions as `<core-transition>` object s so they can be

13 reused in a pluggable transition system such as in `<core-overlay>`. Currently t his class has

14 some specific support to animate an element from and to the viewport such as a d ialog, but you

15 can override it for different effects.

16

17 Example:

18

19 my-css-transition.html:

20

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

22 <template>

23 <style>

24 :host(.my-transition) {

25 opacity: 0;

26 transition: transform 1s ease-out, opacity 1s ease-out;

27 }

28 :host(.my-transition.my-opened) {

29 opacity: 1;

30 transform: none;

31 }

32 :host(.my-transition-top) {

33 transform: translateY(-100vh);

34 }

35 :host(.my-transition-bottom) {

36 transform: translateY(100vh);

37 }

38 </style>

39 </template>

40 <script>

41 Polymer({

42 baseClass: 'my-transition',

43 openedClass: 'my-opened'

44 });

45 </script>

46 </polymer-element>

47

48 <my-css-transition id="my-transition-top" transitionType="top"></my-css-tran sition>

49 <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-cs s-transition>

50

51 my-css-transition-demo.html

52

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

54 <link href="my-css-transition.html">

55

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

57

58 <script>

59 // Get the core-transition

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

61 meta.type = 'transition';

62 var transition1 = meta.byId('my-transition-top');

63

64 // Set up the animation

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

66 transition1.setup(animated);

67 transition1.go(animated, {opened: true});

68 </script>

69

70 The first element in the template of a `<core-transition-css>` object should be a stylesheet. It

71 will be injected to the scope of the animated node in the `setup` function. The node is initially

72 invisible with `opacity: 0`, and you can transition it to an "opened" state by p assing

73 `{opened: true}` to the `go` function.

74

75 All nodes being animated will get the class `my-transition` added in the `setup` function.

76 Additionally, the class `my-transition-<transitionType>` will be applied. You ca n use the

77 `transitionType` attribute to implement several different behaviors with the sam e

78 `<core-transition-css>` object. In the above example, `<my-css-transition>` impl ements both

79 sliding the node from the top of the viewport and from the bottom of the viewpor t.

80

81 Available transitions

82 ---------------------

83

84 `<core-transition-css>` includes several commonly used transitions.

85

86 `core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens .

87

88 `core-transition-center`: Zooms the node into the final size.

89

90 `core-transition-top`: Slides the node into the final position from the top.

91

92 `core-transition-bottom`: Slides the node into the final position from the botto m.

93

94 `core-transition-left`: Slides the node into the final position from the left.

95

96 `core-transition-right`: Slides the node into the final position from the right.

97

98 @group Polymer Core Elements

99 @element core-transition-css

100 @extends core-transition

101 @status beta

102 @homepage github.io

103 -->

104

105 <link rel="import" href="core-transition.html">

106

107 <polymer-element name="core-transition-css" extends="core-transition" attributes ="transitionType">

108 <template>

109 <link no-shim rel="stylesheet" href="core-transition-overlay.css">

110 </template>

111 <script>

112

113 Polymer('core-transition-css', {

114

115 /**

116 * The class that will be applied to all animated nodes.

117 *

118 * @attribute baseClass

119 * @type string

120 * @default "core-transition"

121 */

122 baseClass: 'core-transition',

123

124 /**

125 * The class that will be applied to nodes in the opened state.

126 *

127 * @attribute openedClass

128 * @type string

129 * @default "core-opened"

130 */

131 openedClass: 'core-opened',

132

133 /**

134 * The class that will be applied to nodes in the closed state.

135 *

136 * @attribute closedClass

137 * @type string

138 * @default "core-closed"

139 */

140 closedClass: 'core-closed',

141

142 /**

143 * Event to listen to for animation completion.

144 *

145 * @attribute completeEventName

146 * @type string

147 * @default "transitionEnd"

148 */

149 completeEventName: 'transitionend',

150

151 publish: {

152 /**

153 * A secondary configuration attribute for the animation. The class

154 * `<baseClass>-<transitionType` is applied to the animated node during

155 * `setup`.

156 *

157 * @attribute transitionType

158 * @type string

159 */

160 transitionType: null

161 },

162

163 registerCallback: function(element) {

164 this.transitionStyle = element.templateContent().firstElementChild;

165 },

166

167 // template is just for loading styles, we don't need a shadowRoot

168 fetchTemplate: function() {

169 return null;

170 },

171

172 go: function(node, state) {

173 if (state.opened !== undefined) {

174 this.transitionOpened(node, state.opened);

175 }

176 },

177

178 setup: function(node) {

179 if (!node._hasTransitionStyle) {

180 if (!node.shadowRoot) {

181 node.createShadowRoot().innerHTML = '<content></content>';

182 }

183 this.installScopeStyle(this.transitionStyle, 'transition',

184 node.shadowRoot);

185 node._hasTransitionStyle = true;

186 }

187 node.classList.add(this.baseClass);

188 if (this.transitionType) {

189 node.classList.add(this.baseClass + '-' + this.transitionType);

190 }

191 },

192

193 teardown: function(node) {

194 node.classList.remove(this.baseClass);

195 if (this.transitionType) {

196 node.classList.remove(this.baseClass + '-' + this.transitionType);

197 }

198 },

199

200 transitionOpened: function(node, opened) {

201 this.listenOnce(node, this.completeEventName, function() {

202 node.classList.toggle(this.revealedClass, opened);

203 if (!opened) {

204 node.classList.remove(this.closedClass);

205 }

206 this.complete(node);

207 });

208 node.classList.toggle(this.openedClass, opened);

209 node.classList.toggle(this.closedClass, !opened);

210 }

211

212 });

213 </script>

214 </polymer-element>

215

216 <core-transition-css id="core-transition-fade"></core-transition-css>

217 <core-transition-css id="core-transition-center" transitionType="center"></core- transition-css>

218 <core-transition-css id="core-transition-top" transitionType="top"></core-transi tion-css>

219 <core-transition-css id="core-transition-bottom" transitionType="bottom"></core- transition-css>

220 <core-transition-css id="core-transition-left" transitionType="left"></core-tran sition-css>

221 <core-transition-css id="core-transition-right" transitionType="right"></core-tr ansition-css>

OLD	NEW