| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer('core-transition-css', { | |
| 4 | |
| 5 /** | |
| 6 * The class that will be applied to all animated nodes. | |
| 7 * | |
| 8 * @attribute baseClass | |
| 9 * @type string | |
| 10 * @default "core-transition" | |
| 11 */ | |
| 12 baseClass: 'core-transition', | |
| 13 | |
| 14 /** | |
| 15 * The class that will be applied to nodes in the opened state. | |
| 16 * | |
| 17 * @attribute openedClass | |
| 18 * @type string | |
| 19 * @default "core-opened" | |
| 20 */ | |
| 21 openedClass: 'core-opened', | |
| 22 | |
| 23 /** | |
| 24 * The class that will be applied to nodes in the closed state. | |
| 25 * | |
| 26 * @attribute closedClass | |
| 27 * @type string | |
| 28 * @default "core-closed" | |
| 29 */ | |
| 30 closedClass: 'core-closed', | |
| 31 | |
| 32 /** | |
| 33 * Event to listen to for animation completion. | |
| 34 * | |
| 35 * @attribute completeEventName | |
| 36 * @type string | |
| 37 * @default "transitionEnd" | |
| 38 */ | |
| 39 completeEventName: 'transitionend', | |
| 40 | |
| 41 publish: { | |
| 42 /** | |
| 43 * A secondary configuration attribute for the animation. The class | |
| 44 * `<baseClass>-<transitionType` is applied to the animated node during | |
| 45 * `setup`. | |
| 46 * | |
| 47 * @attribute transitionType | |
| 48 * @type string | |
| 49 */ | |
| 50 transitionType: null | |
| 51 }, | |
| 52 | |
| 53 registerCallback: function(element) { | |
| 54 this.transitionStyle = element.templateContent().firstElementChild; | |
| 55 }, | |
| 56 | |
| 57 // template is just for loading styles, we don't need a shadowRoot | |
| 58 fetchTemplate: function() { | |
| 59 return null; | |
| 60 }, | |
| 61 | |
| 62 go: function(node, state) { | |
| 63 if (state.opened !== undefined) { | |
| 64 this.transitionOpened(node, state.opened); | |
| 65 } | |
| 66 }, | |
| 67 | |
| 68 setup: function(node) { | |
| 69 if (!node._hasTransitionStyle) { | |
| 70 if (!node.shadowRoot) { | |
| 71 node.createShadowRoot().innerHTML = '<content></content>'; | |
| 72 } | |
| 73 this.installScopeStyle(this.transitionStyle, 'transition', | |
| 74 node.shadowRoot); | |
| 75 node._hasTransitionStyle = true; | |
| 76 } | |
| 77 node.classList.add(this.baseClass); | |
| 78 if (this.transitionType) { | |
| 79 node.classList.add(this.baseClass + '-' + this.transitionType); | |
| 80 } | |
| 81 }, | |
| 82 | |
| 83 teardown: function(node) { | |
| 84 node.classList.remove(this.baseClass); | |
| 85 if (this.transitionType) { | |
| 86 node.classList.remove(this.baseClass + '-' + this.transitionType); | |
| 87 } | |
| 88 }, | |
| 89 | |
| 90 transitionOpened: function(node, opened) { | |
| 91 this.listenOnce(node, this.completeEventName, function() { | |
| 92 if (!opened) { | |
| 93 node.classList.remove(this.closedClass); | |
| 94 } | |
| 95 this.complete(node); | |
| 96 }); | |
| 97 node.classList.toggle(this.openedClass, opened); | |
| 98 node.classList.toggle(this.closedClass, !opened); | |
| 99 } | |
| 100 | |
| 101 }); | |
| OLD | NEW |