Merge pull request #607 from brettburley/fix-visibility

Apply visibility by clearing the property.

addon/animate.js

@@ -40,7 +40,7 @@ export function animate(elt, props, opts, label) {
     opts.display = '';
   }
   if (typeof(opts.visibility) === 'undefined') {
-    opts.visibility = 'visible';
+    opts.visibility = '';
   }
 
   if (opts.progress) {

tests/acceptance/scenarios-test.js

@@ -4,6 +4,10 @@ import { injectTransitionSpies } from '../helpers/integration';
 import { test } from 'qunit';
 import moduleForAcceptance from '../helpers/module-for-acceptance';
 
+function visibility(selector) {
+  return window.getComputedStyle(find(selector)[0]).visibility;
+}
+
 moduleForAcceptance('Acceptance: Scenarios', {
   beforeEach() {
     injectTransitionSpies(this.application);
@@ -47,3 +51,20 @@ test('model-dependent transitions are matching correctly', function(assert) {
     ranTransition(assert, 'toRight');
   });
 });
+
+test('nested transitions with explode properly hide children', function(assert) {
+  visit('/scenarios/nested-explode-transition');
+  andThen(() => click('button:contains(Toggle A/B)'));
+  andThen(() => {
+    click('button:contains(Toggle One/Two)');
+    later(function() {
+      assert.equal(find('.child-one-b').length, 2, 'explode transition clones child-one');
+      assert.equal(visibility('.child-one-b:first'), 'hidden', 'even nested children are hidden');
+      assert.equal(visibility('.child-one-b:last'), 'visible', 'nested children of clone are visible');
+
+      assert.equal(find('.child-two').length, 2, 'explode transition clones child-two');
+      assert.equal(visibility('.child-two:first'), 'hidden', 'original child-two is hidden');
+      assert.equal(visibility('.child-two:last'), 'visible', 'cloned child-two is visible');
+    }, 50);
+  });
+});

tests/dummy/app/controllers/scenarios/nested-explode-transition.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  showOne: true,
+  showA: true,
+
+  actions: {
+    toggle(prop) {
+      this.toggleProperty(prop);
+    }
+  }
+});

tests/dummy/app/router.js

@@ -72,6 +72,7 @@ Router.map(function() {
       this.route('three');
     });
     this.route('in-test-outlet');
+    this.route('nested-explode-transition');
   });
 
 });

tests/dummy/app/templates/scenarios/nested-explode-transition.hbs

@@ -0,0 +1,16 @@
+<button {{action "toggle" "showA"}}>Toggle A/B</button>
+<button {{action "toggle" "showOne"}}>Toggle One/Two</button>
+
+{{#liquid-if showOne class="nested-explode-transition-scenario"}}
+  <div class="child">
+    {{#liquid-if showA use="toLeft"}}
+      <div class="child-one-a">One: A</div>
+    {{else}}
+      <div class="child-one-b">One: B</div>
+    {{/liquid-if}}
+  </div>
+{{else}}
+  <div class="child child-two">
+    Two
+  </div>
+{{/liquid-if}}

tests/dummy/app/transitions.js

@@ -195,6 +195,14 @@ this.transition(
     })
   );
 
+  this.transition(
+    this.hasClass('nested-explode-transition-scenario'),
+    this.use('explode', {
+      pick: '.child',
+      use: ['toLeft', { duration: 500 }]
+    }),
+  );
+
   this.transition(
     this.includingInitialRender(),
     this.outletName('test'),