bower_components/core-animated-pages/transitions/cross-fade.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-animated-pages/transitions/cross-fade.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

« no previous file with comments | « bower_components/core-animated-pages/transitions/core-transition-pages.html ('k') | bower_components/core-animated-pages/transitions/hero-transition.css » ('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 <link href="core-transition-pages.html" rel="import">

11

12 <core-style id="cross-fade">

13 polyfill-next-selector { content: ':host > * [cross-fade]'; }

14 ::content > * /deep/ [cross-fade] {

15 -webkit-transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.d uration}} cubic-bezier(0.4, 0, 0.2, 1);

16 transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.duration} } cubic-bezier(0.4, 0, 0.2, 1);

17 }

18

19 polyfill-next-selector { content: ':host > * [cross-fade][bg]'; }

20 ::content > * /deep/ [cross-fade][bg] {

21 -webkit-transition: background-color {{g.transitions.xfadeDuration \|\| g.tran sitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);

22 transition: background-color {{g.transitions.xfadeDuration \|\| g.transitions. duration}} cubic-bezier(0.4, 0, 0.2, 1);

23 }

24

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

26 ::content > * /deep/ [cross-fade][hero-p] {

27 -webkit-transition: background-color {{g.transitions.xfadeDuration \|\| g.tran sitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);

28 transition: background-color {{g.transitions.xfadeDuration \|\| g.transitions. duration}} cubic-bezier(0.4, 0, 0.2, 1);

29 }

30

31 polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; }

32 ::content > .core-selected /deep/ [cross-fade] {

33 opacity: 1;

34 }

35

36 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros s-fade]:not([hero-p]):not([bg])'; }

37 ::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):no t([bg]) {

38 opacity: 0;

39 }

40

41 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros s-fade][bg]'; }

42 ::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] {

43 background-color: rgba(0, 0, 0, 0);

44 }

45

46 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros s-fade][hero-p]'; }

47 ::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] {

48 background-color: rgba(0, 0, 0, 0);

49 }

50 </core-style>

51

52 <core-style id="cross-fade-delayed">

53 polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; }

54 ::content > * /deep/ [cross-fade-delayed] {

55 -webkit-transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.d uration}} ease-out;

56 transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.duration} } ease-out;

57 }

58

59 polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed] '; }

60 ::content > .core-selected /deep/ [cross-fade-delayed] {

61 -webkit-transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.d uration}} ease-out {{g.transitions.xfadeDelay \|\| g.transitions.xfadeDuration \|\| g.transitions.duration}};

62 transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.duration} } ease-out {{g.transitions.xfadeDelay \|\| g.transitions.xfadeDuration \|\| g.transi tions.duration}};

63 }

64

65 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros s-fade-delayed]'; }

66 ::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] {

67 opacity: 0;

68 }

69

70 polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed] '; }

71 ::content > .core-selected /deep/ [cross-fade-delayed] {

72 opacity: 1;

73 }

74

75 </core-style>

76

77 <core-style id="cross-fade-all">

78 /* cross-fade-all: cross fade everything except for heroes and their parents * /

79 polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):no t([hero-p]):not([cross-fade])'; }

80 :host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([c ross-fade]) {

81 -webkit-transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.d uration}} ease-out;

82 transition: opacity {{g.transitions.xfadeDuration \|\| g.transitions.duration} } ease-out;

83 }

84

85 polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.cor e-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; }

86 :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not( [hero]):not([hero-p]):not([cross-fade]) {

87 opacity: 0;

88 }

89

90 polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:n ot([hero])'; }

91 .host(.cross-fade-all) ::content > .core-selected /deep/ * {

92 opacity: 1;

93 }

94

95 /* Only background-color is allowed for the hero's parents, no opacity transit ions */

96 polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; }

97 :host(.cross-fade-all) ::content > * /deep/ [hero-p] {

98 -webkit-transition: background-color {{g.transitions.xfadeDuration \|\| g.tran sitions.duration}} ease-out;

99 transition: background-color {{g.transitions.xfadeDuration \|\| g.transitions. duration}} ease-out;

100 opacity: 1;

101 }

102

103 polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.cor e-selected) [hero-p]'; }

104 :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero- p] {

105 background-color: rgba(0, 0, 0, 0);

106 }

107 </core-style>

108

109 <!--

110

111 `cross-fade` fades out elements in the outgoing page and fades in elements in th e

112 incoming page during a page transition. You can configure the duration of the

113 transition with the global variable `CoreStyle.g.transitions.xfadeDuration`.

114

115 Example:

116

117 <core-animated-pages transition="cross-fade">

118 <section>

119 <div id="div1" cross-fade></div>

120 </section>

121 <section>

122 <div id="div2" cross-fade bg>

123 <div id="div3" cross-fade></div>

124 <div id="div4"></div>

125 </div>

126 </section>

127 </core-animated-pages>

128

129 In the above example, `#div1` and `#div3` has the `cross-fade` attribute. `#div1 `

130 will fade out and `#div3` will fade in with opacity transitions when the page sw itches

131 from 0 to 1. Sometimes, you may want to only fade the background color of an ele ment

132 but not its children, and you can use the `bg` attribute along with the `#div1`

133 attribute as in `#div2`.

134

135 @class cross-fade

136 @extends core-transition-pages

137 @status beta

138 @homepage github.io

139

140 -->

141

142 <!--

143

144 `cross-fade-delayed` performs a cross-fade after some delay, either specified in

145 the global variable `CoreStyle.g.transitions.xfadeDelay` or the duration of the

146 transition.

147

148 Example:

149

150 <core-animated-pages transition="hero-transition cross-fade-delayed">

151 <section>

152 <div id="div1" hero-id hero></div>

153 </section>

154 <section>

155 <div id="div2" hero-id hero>

156 <div id="div3" cross-fade-delayed></div>

157 </div>

158 </section>

159 </core-animated-pages>

160

161 In the above example, `#div3` fades in after the hero transition from `#div1` to

162 `#div2` completes.

163

164 @class cross-fade-delayed

165 @extends core-transition-pages

166 @status beta

167 @homepage github.io

168

169 -->

170

171 <core-transition-pages id="cross-fade"></core-transition-pages>

172 <core-transition-pages id="cross-fade-delayed"></core-transition-pages>

173 <core-transition-pages id="cross-fade-all" scopeClass="cross-fade-all"></core-tr ansition-pages>

OLD	NEW