OLD | NEW |
| (Empty) |
1 | |
2 | |
3 (function () { | |
4 | |
5 // create some basic transition styling data. | |
6 var transitions = CoreStyle.g.transitions = CoreStyle.g.transitions || {}; | |
7 transitions.duration = '500ms'; | |
8 transitions.heroDelay = '50ms'; | |
9 transitions.scaleDelay = '500ms'; | |
10 transitions.cascadeFadeDuration = '250ms'; | |
11 | |
12 Polymer('core-transition-pages',{ | |
13 | |
14 publish: { | |
15 /** | |
16 * This class will be applied to the scope element in the `prepare` function
. | |
17 * It is removed in the `complete` function. Used to activate a set of CSS | |
18 * rules that need to apply before the transition runs, e.g. a default opaci
ty | |
19 * or transform for the non-active pages. | |
20 * | |
21 * @attribute scopeClass | |
22 * @type string | |
23 * @default '' | |
24 */ | |
25 scopeClass: '', | |
26 | |
27 /** | |
28 * This class will be applied to the scope element in the `go` function. It
is | |
29 * remoived in the `complete' function. Generally used to apply a CSS transi
tion | |
30 * rule only during the transition. | |
31 * | |
32 * @attribute activeClass | |
33 * @type string | |
34 * @default '' | |
35 */ | |
36 activeClass: '', | |
37 | |
38 /** | |
39 * Specifies which CSS property to look for when it receives a `transitionEn
d` event | |
40 * to determine whether the transition is complete. If not specified, the fi
rst | |
41 * transitionEnd event received will complete the transition. | |
42 * | |
43 * @attribute transitionProperty | |
44 * @type string | |
45 * @default '' | |
46 */ | |
47 transitionProperty: '' | |
48 }, | |
49 | |
50 /** | |
51 * True if this transition is complete. | |
52 * | |
53 * @attribute completed | |
54 * @type boolean | |
55 * @default false | |
56 */ | |
57 completed: false, | |
58 | |
59 prepare: function(scope, options) { | |
60 this.boundCompleteFn = this.complete.bind(this, scope); | |
61 if (this.scopeClass) { | |
62 scope.classList.add(this.scopeClass); | |
63 } | |
64 }, | |
65 | |
66 go: function(scope, options) { | |
67 this.completed = false; | |
68 if (this.activeClass) { | |
69 scope.classList.add(this.activeClass); | |
70 } | |
71 scope.addEventListener('transitionend', this.boundCompleteFn, false); | |
72 }, | |
73 | |
74 setup: function(scope) { | |
75 if (!scope._pageTransitionStyles) { | |
76 scope._pageTransitionStyles = {}; | |
77 } | |
78 | |
79 var name = this.calcStyleName(); | |
80 | |
81 if (!scope._pageTransitionStyles[name]) { | |
82 this.installStyleInScope(scope, name); | |
83 scope._pageTransitionStyles[name] = true; | |
84 } | |
85 }, | |
86 | |
87 calcStyleName: function() { | |
88 return this.id || this.localName; | |
89 }, | |
90 | |
91 installStyleInScope: function(scope, id) { | |
92 if (!scope.shadowRoot) { | |
93 scope.createShadowRoot().innerHTML = '<content></content>'; | |
94 } | |
95 var root = scope.shadowRoot; | |
96 var scopeStyle = document.createElement('core-style'); | |
97 root.insertBefore(scopeStyle, root.firstChild); | |
98 scopeStyle.applyRef(id); | |
99 }, | |
100 | |
101 complete: function(scope, e) { | |
102 // TODO(yvonne): hack, need to manage completion better | |
103 if (e.propertyName !== 'box-shadow' && (!this.transitionProperty || e.proper
tyName.indexOf(this.transitionProperty) !== -1)) { | |
104 this.completed = true; | |
105 this.fire('core-transitionend', this, scope); | |
106 } | |
107 }, | |
108 | |
109 // TODO(sorvell): ideally we do this in complete. | |
110 ensureComplete: function(scope) { | |
111 scope.removeEventListener('transitionend', this.boundCompleteFn, false); | |
112 if (this.scopeClass) { | |
113 scope.classList.remove(this.scopeClass); | |
114 } | |
115 if (this.activeClass) { | |
116 scope.classList.remove(this.activeClass); | |
117 } | |
118 } | |
119 | |
120 }); | |
121 | |
122 })(); | |
123 | |
OLD | NEW |