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 node.classList.toggle(this.revealedClass, opened); 93 if (!opened) { 94 node.classList.remove(this.closedClass); 95 } 96 this.complete(node); 97 }); 98 node.classList.toggle(this.openedClass, opened); 99 node.classList.toggle(this.closedClass, !opened); 100 } 101 102 }); 103