New Twiddle

components.animated-block.js

import Ember from 'ember';

function delay(duration, scope = null) {
  return new Ember.RSVP.Promise(resolve => Ember.run.later(scope, resolve, duration));
}

export default Ember.Component.extend({
  states: [],
  
  didReceiveAttrs() {
    const value = this.get('value');
    const lastState = this.get('states.lastObject');
    if (!lastState || lastState.value !== value) {
      const state = Ember.Object.create({
        value
      });
      
      const oldState = this.get('states.firstObject');
      if (oldState) {
        this.set('states', [oldState, state]);
        this.renderOut(oldState).then(() => {
          this.renderIn(state);
        });
      } else {
        this.set('states', [state]);
        this.renderIn(state);
      }
    }
  },
  
  renderIn(state) {
    let renderingInPromise = state.get('renderingInPromise');
    if (!renderingInPromise) {
      renderingInPromise = delay(1000);
      state.setProperties({
        renderingInPromise,
        isRenderingIn: true,
        isRendered: true
      });
      Ember.run.later(() => {
        state.set('isRenderingIn', false);
      }, 100);
    }
    
    return renderingInPromise;
  },
  
  renderOut(state) {
    let renderingOutPromise = state.get('renderingOutPromise');
    if (!renderingOutPromise) {
      renderingOutPromise = delay(1000).then(() => {
        this.set('states', this.get('states').without(state));
      });
      state.setProperties({
        renderingOutPromise,
        isRenderingOut: true
      });
    }
    
    return renderingOutPromise;
  }
}).reopenClass({
  positionalParams: ['value']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    toggle() {
      this.set('foo', !this.get('foo'));
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<a {{action 'toggle'}}>foo? {{foo}}</a>
<br>
<br>
{{#animated-block foo class="animated-block" as |bar|}}
  {{#if bar}}
  	<div class="bar">1<br>2<br>3<br>4<br>5</div>
  {{else}}
  	<div class="unbar">1<br>2<br>3<br>4<br>5<br>6<br>7</div>
  {{/if}}
{{/animated-block}}
<br>
<br>
<style>
.animated-block {
  height: 200px;
  overflow-y: auto;
}
.bar, .unbar { width: 200px; color: white; line-height: 50px; }
.bar { background: blue; }
.unbar { background: black; }
</style>

templates.components.animated-block.hbs

{{#each states as |state|}}
  {{#if state.isRendered}}
  	<div class="animated-block__state {{if state.isRenderingOut "animated-block__state--is-rendering-out"}} {{if state.isRenderingIn "animated-block__state--is-rendering-in"}}">
      {{yield state.value}}
    </div>
  {{/if}}
{{/each}}

<style>
.animated-block__state {
  transition: all 1s;
}

.animated-block__state--is-rendering-out {
  opacity: 0;
}

.animated-block__state--is-rendering-in {
  opacity: 0;
}
</style>

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}