src/third_party/polymer/components-chromium/core-transition/core-transition-css-extracted.js

   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   });