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

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

9

10 `<core-transition-css>` implements CSS transitions as `<core-transition>` object s so they can be

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

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

13 can override it for different effects.

14

15 Example:

16

17 my-css-transition.html:

18

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

20 <template>

21 <style>

22 :host(.my-transition) {

23 opacity: 0;

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

25 }

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

27 opacity: 1;

28 transform: none;

29 }

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

31 transform: translateY(-100vh);

32 }

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

34 transform: translateY(100vh);

35 }

36 </style>

37 </template>

38 <script>

39 Polymer({

40 baseClass: 'my-transition',

41 openedClass: 'my-opened'

42 });

43 </script>

44 </polymer-element>

45

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

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

48

49 my-css-transition-demo.html

50

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

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

53

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

55

56 <script>

57 // Get the core-transition

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

59 meta.type = 'transition';

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

61

62 // Set up the animation

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

64 transition1.setup(animated);

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

66 </script>

67

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

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

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

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

72

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

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

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

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

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

78

79 Available transitions

80 ---------------------

81

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

83

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

85

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

87

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

89

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

91

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

93

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

95

96 @group Polymer Core Elements

97 @element core-transition-css

98 @extends core-transition

99 @status beta

100 @homepage github.io

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

102

103 </head><body><polymer-element name="core-transition-css" extends="core-transitio n" attributes="transitionType" assetpath="">

104 <template>

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

106 </template>

107

108 </polymer-element>

109

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

111 <core-transition-css id="core-transition-center" transitiontype="center"></core- transition-css>

112 <core-transition-css id="core-transition-top" transitiontype="top"></core-transi tion-css>

113 <core-transition-css id="core-transition-bottom" transitiontype="bottom"></core- transition-css>

114 <core-transition-css id="core-transition-left" transitiontype="left"></core-tran sition-css>

115 <core-transition-css id="core-transition-right" transitiontype="right"></core-tr ansition-css>

116 <script charset="utf-8" src="core-transition-css-extracted.js"></script></body>< /html>

OLD	NEW