New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  showA: true,
  showC: false,
  
  actions: {
    toggle(propName) {
      this.toggleProperty(propName);
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

p {
  line-height: 1.4;
}

.pane {
  width: 100%;
  border: 1px solid #ccc;
  padding: 20px;
}

a {
  text-decoration: underline;
  cursor: pointer;
}

templates.application.hbs

<h1>liquid-fire visibility bug</h1>

<p>To demonstrate the bug, first <b>Toggle A/B</b>, then <b>Toggle C</b>, and you'll see the ghost of <b>B</b> until the animation completes (since the child element has `visibility: visible` applied from the prior transition). If you don't toggle A/B first, then the animation works without the ghost element since it does not have `visibility: visible` applied.</p>
<br>
<a {{action "toggle" "showC"}}>Toggle C</a>
<a {{action "toggle" "showB"}}>Toggle A/B</a>
<br><br>

{{#liquid-if showC class="parent-pane"}}
	<div class="pane">C</div>
{{else}}
  <div class="pane">
    {{#liquid-if showB use="toLeft"}}
      B
    {{else}}
      A
    {{/liquid-if}}
  </div>
{{/liquid-if}}
<br>
<br>

transitions.js

export default function() {
  this.transition(
    this.hasClass('parent-pane'),
  	this.use('explode', {
      pick: '.pane',
      use: ['toLeft', { duration: 1000 }]
    }),
    this.debug()
  );
}

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "liquid-fire": "0.29.2"
  }
}