third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html - Issue 666453002: Removed Polymer elements depending on web-animations-js.

Side by Side Diff: third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html

Issue 666453002: Removed Polymer elements depending on web-animations-js. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 6 years, 2 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 @group Paper Elements

11 @class paper-menu-button-transition

12 @extends core-transition-css

13 -->

14 <link href="../polymer/polymer.html" rel="import">

15 <link href="../core-transition/core-transition-css.html" rel="import">

16 <link href="../core-animation/web-animations.html" rel="import">

17

18 <polymer-element name="paper-menu-button-transition" extends="core-transition-cs s" attributes="duration transformOrigin">

19 <template>

20 <link no-shim href="paper-menu-button-transition.css" rel="stylesheet">

21 </template>

22 <script>

23 Polymer('paper-menu-button-transition', {

24

25 baseClass: 'paper-menu-button-transition',

26 revealedClass: 'paper-menu-button-revealed',

27 openedClass: 'paper-menu-button-opened',

28 closedClass: 'paper-menu-button-closed',

29

30 duration: 500,

31

32 setup: function(node) {

33 this.super(arguments);

34

35 var bg = node.querySelector('.paper-menu-button-overlay-bg');

36 bg.style.transformOrigin = this.transformOrigin;

37 bg.style.webkitTransformOrigin = this.transformOrigin;

38 },

39

40 transitionOpened: function(node, opened) {

41 this.super(arguments);

42

43 if (opened) {

44 if (this.player) {

45 this.player.cancel();

46 }

47

48 var anims = [];

49

50 var ink = node.querySelector('.paper-menu-button-overlay-ink');

51 var offset = 40 / Math.max(node.cachedSize.width, node.cachedSize.heig ht);

52 anims.push(new Animation(ink, [{

53 'opacity': 0.9,

54 'transform': 'scale(0)',

55 }, {

56 'opacity': 0.9,

57 'transform': 'scale(1)'

58 }], {

59 duration: this.duration * offset

60 }));

61

62 var bg = node.querySelector('.paper-menu-button-overlay-bg');

63 anims.push(new Animation(bg, [{

64 'opacity': 0.9,

65 'transform': 'scale(' + 40 / node.cachedSize.width + ',' + 40 / node .cachedSize.height + ')',

66 }, {

67 'opacity': 1,

68 'transform': 'scale(0.95, 0.5)'

69 }, {

70 'opacity': 1,

71 'transform': 'scale(1, 1)'

72 }], {

73 delay: this.duration * offset,

74 duration: this.duration * (1 - offset),

75 fill: 'forwards'

76 }));

77

78 var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.q uerySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector ('core-menu::shadow content').getDistributedNodes().array();

79 var items = nodes.filter(function(n) {

80 return n.nodeType === Node.ELEMENT_NODE;

81 });

82 var itemDelay = offset + (1 - offset) / 2;

83 var itemDuration = this.duration * (1 - itemDelay) / items.length;

84 items.forEach(function(item, i) {

85 anims.push(new Animation(item, [{

86 'opacity': 0

87 }, {

88 'opacity': 1

89 }], {

90 delay: this.duration * itemDelay + itemDuration * i,

91 duration: itemDuration,

92 fill: 'both'

93 }));

94 }.bind(this));

95

96 var shadow = node.querySelector('paper-shadow');

97 anims.push(new Animation(shadow, function(t, target) {

98 if (t > offset * 2 && shadow.z === 0) {

99 shadow.z = 1

100 }

101 }, {

102 duration: this.duration

103 }));

104

105 var group = new AnimationGroup(anims, {

106 easing: 'cubic-bezier(0.4, 0, 0.2, 1)'

107 });

108 this.player = document.timeline.play(group);

109 }

110 },

111

112 });

113 </script>

114 </polymer-element>

115

116 <paper-menu-button-transition id="paper-menu-button-transition-top-left" transfo rmOrigin="0% 0%"></paper-menu-button-transition>

117 <paper-menu-button-transition id="paper-menu-button-transition-top-right" transf ormOrigin="100% 0%"></paper-menu-button-transition>

118 <paper-menu-button-transition id="paper-menu-button-transition-top-right-slow" t ransformOrigin="100% 0%" duration="10000"></paper-menu-button-transition>

OLD	NEW