third_party/polymer/components-chromium/core-animated-pages/transitions/hero-transition.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/transitions/hero-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-chromium/core-animated-pages/transitions/hero-transition.css ('k') | third_party/polymer/components-chromium/core-animated-pages/transitions/hero-transition-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 href="core-transition-pages.html" rel="import">

9

10 </head><body><core-style id="hero-transition">

11 /* Hide heroes that are not currently transitioning */

12 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [h ero]'; }

13 ::content > [animate]:not(.core-selected) /deep/ [hero] {

14 opacity: 0;

15 }

16

17 polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }

18 ::content > .core-selected[animate] /deep/ [hero] {

19 opacity: 1;

20 z-index: 10000;

21 }

22

23 polyfill-next-selector { content: ':host > * [hero-p]'; }

24 ::content > * /deep/ [hero-p] {

25 -webkit-transition: box-shadow 100ms ease-out;

26 transition: box-shadow 100ms ease-out;

27 }

28

29 polyfill-next-selector { content: ':host > [animate] [hero-p]'; }

30 ::content > [animate] /deep/ [hero-p] {

31 box-shadow: none !important;

32 }

33 </core-style>

34

35

36 <!--

37

38 `hero-transition` transforms two elements in different pages such that they appe ar

39 to be shared across the pages.

40

41 Example:

42

43 <core-animated-pages transition="hero-transition">

44 <section layout horizontal>

45 <div id="div1" flex></div>

46 <div id="div2" flex hero-id="shared" hero></div>

47 </section>

48 <section>

49 <section layout horizontal>

50 <div id="div3" flex hero-id="shared" hero></div>

51 <div id="div4" flex></div>

52 </section>

53 </section>

54 </core-animated-pages>

55

56 In the above example, the elements `#div2` and `#div3` shares the same `hero-id`

57 attribute and a single element appears to translate and scale smoothly between

58 the two positions during a page transition.

59

60 Both elements from the source and destination pages must share the same `hero-id `

61 and must both contain the `hero` attribute to trigger the transition. The separa te

62 `hero` attribute allows you to use binding to configure the transition:

63

64 Example:

65

66 <core-animated-pages transition="hero-transition">

67 <section layout horizontal>

68 <div id="div1" flex hero-id="shared" hero?="{{selected == 0}}"></div>

69 <div id="div2" flex hero-id="shared" hero?="{{selected == 1}}"></div>

70 </section>

71 <section>

72 <section layout horizontal>

73 <div id="div3" flex hero-id="shared" hero></div>

74 </section>

75 </section>

76 </core-animated-pages>

77

78 In the above example, either `#div1` or `#div2` scales to `#div3` during a page transition,

79 depending on the value of `selected`.

80

81 Because it is common to share elements with different `border-radius` values, by default

82 this transition will also animate the `border-radius` property.

83

84 You can configure the duration of the hero transition with the global variable

85 `CoreStyle.g.transitions.heroDuration`.

86

87 @class hero-transition

88 @extends core-transition-pages

89 @status beta

90 @homepage github.io

91 -->

92 <polymer-element name="hero-transition" extends="core-transition-pages" assetpat h="">

93

94 </polymer-element>

95

96 <hero-transition id="hero-transition"></hero-transition>

97 <script charset="utf-8" src="hero-transition-extracted.js"></script></body></htm l>

OLD	NEW