check if transitionend was triggered by iron-collapse (#68)

* check if transitionend was triggered by iron-collapse

* call _transitionEnd only on updateSize

* notify that collapse was opened/closed

* 80-char formatting of willAnimate

iron-collapse.html

@@ -119,6 +119,18 @@
         observer: '_openedChanged'
       },
 
+      /**
+       * When true, the element is transitioning its opened state. When false,
+       * the element has finished opening/closing.
+       *
+       * @attribute transitioning
+       */
+      transitioning: {
+        type: Boolean,
+        notify: true,
+        readOnly: true
+      },
+
       /**
        * Set noAnimation to true to disable animations.
        *
@@ -165,12 +177,7 @@
     },
 
     listeners: {
-      transitionend: '_transitionEnd'
-    },
-
-    attached: function() {
-      // It will take care of setting correct classes and styles.
-      this._transitionEnd();
+      transitionend: '_onTransitionEnd'
     },
 
     /**
@@ -198,15 +205,13 @@
     updateSize: function(size, animated) {
       // Consider 'auto' as '', to take full size.
       size = size === 'auto' ? '' : size;
-      // No change!
-      if (this._desiredSize === size) {
-        return;
-      }
+
+      var willAnimate = animated && !this.noAnimation &&
+                        this.isAttached && this._desiredSize !== size;
 
       this._desiredSize = size;
 
       this._updateTransition(false);
-      var willAnimate = animated && !this.noAnimation && this._isDisplayed;
       // If we can animate, must do some prep work.
       if (willAnimate) {
         // Animation will start at the current size.
@@ -262,6 +267,7 @@
       this.setAttribute('aria-expanded', this.opened);
       this.setAttribute('aria-hidden', !this.opened);
 
+      this._setTransitioning(true);
       this.toggleClass('iron-collapse-closed', false);
       this.toggleClass('iron-collapse-opened', false);
       this.updateSize(this.opened ? 'auto' : '0px', true);
@@ -278,19 +284,13 @@
       this.toggleClass('iron-collapse-opened', this.opened);
       this._updateTransition(false);
       this.notifyResize();
+      this._setTransitioning(false);
     },
 
-    /**
-     * Simplistic heuristic to detect if element has a parent with display: none
-     *
-     * @private
-     */
-    get _isDisplayed() {
-      var rect = this.getBoundingClientRect();
-      for (var prop in rect) {
-        if (rect[prop] !== 0) return true;
+    _onTransitionEnd: function(event) {
+      if (Polymer.dom(event).rootTarget === this) {
+        this._transitionEnd();
       }
-      return false;
     },
 
     _calcSize: function() {

test/basic.html

@@ -28,18 +28,17 @@
 
     <test-fixture id="test">
       <template>
-        <iron-collapse id="collapse" opened>
+        <iron-collapse opened>
           <div style="height:100px;">
             Lorem ipsum
           </div>
         </iron-collapse>
       </template>
     </test-fixture>
 
-    <test-fixture id="test-empty">
-    <template>
-        <iron-collapse id="collapse" opened>
-        </iron-collapse>
+    <test-fixture id="empty">
+      <template>
+        <iron-collapse opened></iron-collapse>
       </template>
     </test-fixture>
 
@@ -63,6 +62,10 @@
           assert.isTrue(!collapse.noAnimation, '`noAnimation` is falsy');
         });
 
+        test('not transitioning on attached', function() {
+          assert.isTrue(!collapse.transitioning, '`transitioning` is falsy');
+        });
+
         test('horizontal attribute', function() {
           assert.equal(collapse.horizontal, false);
         });
@@ -75,13 +78,27 @@
           collapse.opened = false;
           // Animation got enabled.
           assert.notEqual(collapse.style.transitionDuration, '0s');
+          assert.equal(collapse.transitioning, true, 'transitioning became true');
           collapse.addEventListener('transitionend', function() {
             // Animation disabled.
             assert.equal(collapse.style.transitionDuration, '0s');
+            assert.equal(collapse.transitioning, false, 'transitioning became false');
             done();
           });
         });
 
+        test('transitioning updated only during transitions between open/close states', function() {
+          var spy = sinon.spy();
+          collapse.addEventListener('transitioning-changed', spy);
+          collapse.noAnimation = true;
+          assert.equal(spy.callCount, 0, 'transitioning not affected by noAnimation');
+          collapse.horizontal = true;
+          assert.equal(spy.callCount, 0, 'transitioning not affected by horizontal');
+          collapse.opened = false;
+          assert.equal(spy.callCount, 2, 'transitioning changed twice');
+          assert.equal(collapse.transitioning, false, 'transitioning is false');
+        });
+
         test('enableTransition(false) disables animations', function() {
           collapse.enableTransition(false);
           assert.isTrue(collapse.noAnimation, '`noAnimation` is true');
@@ -162,14 +179,14 @@
         var collapse;
 
         setup(function() {
-          collapse = fixture('test-empty');
+          collapse = fixture('empty');
         });
 
         test('empty&opened shows dynamically loaded content', function(done) {
           flush(function () {
             collapse.toggle();
             collapse.toggle();
-            assert.equal(collapse.style.maxHeight, "");
+            assert.equal(collapse.style.maxHeight, '');
             done();
           });
         });

test/nested.html

@@ -85,6 +85,18 @@
             assert.equal(innerCollapse.getBoundingClientRect().height, 100);
           });
 
+          test('notifyResize triggered only on element\'s animations', function(done) {
+            var spy = sinon.spy(outerCollapse, 'notifyResize');
+
+            outerCollapse.opened = true;
+            innerCollapse.opened = true;
+
+            setTimeout(function() {
+              assert.equal(spy.callCount, 1, 'notifyResize called once');
+              done();
+            }, 400);
+          });
+
         });
 
         suite('horizontal', function() {