sample animations

components.liquidfire-transition.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['liquidfire-transition'],
  
  isTransitioned: false,
  
  click() {
    this._super();
    this.toggleProperty('isTransitioned');
  }
});

components.manual-transition.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['manual-transition'],
  
  isTransitioned: false,
  
  firstPaneIsActive: true,
  secondPaneIsActive: false,
  
  firstPaneIsTransitioningIn: false,
  firstPaneIsTransitioningOut: false,
  secondPaneIsTransitioningIn: false,
  secondPaneIsTransitioningOut: false,
  
  click() {
    this._super();
    this.toggleProperty('isTransitioned');
    this.animateTransition();
  },
  
  animateTransition() {
    if (this.get('isTransitioned')) {
      this.setProperties({
        firstPaneIsTransitioningOut: true,
        secondPaneIsActive: true,
        secondPaneIsTransitioningIn: true
      });

      Ember.run.later(() => {
        this.setProperties({
          firstPaneIsActive: false,
          firstPaneIsTransitioningOut: false,
          secondPaneIsTransitioningIn: false
        });
      }, 1000);
    } else {
      this.setProperties({
        secondPaneIsTransitioningOut: true,
        firstPaneIsActive: true,
        firstPaneIsTransitioningIn: true
      });

      Ember.run.later(() => {
        this.setProperties({
          secondPaneIsActive: false,
          secondPaneIsTransitioningOut: false,
          firstPaneIsTransitioningIn: false
        });
      }, 1000);
    }
  }
});

components.pane-1.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['pane'],
  classNameBindings: [
    'isTransitioningIn:pane--is-transitioning-in',
    'isTransitioningOut:pane--is-transitioning-out'
  ]
});

components.pane-2.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['pane'],
  classNameBindings: [
    'isTransitioningIn:pane--is-transitioning-in',
    'isTransitioningOut:pane--is-transitioning-out'
  ],
  
  actions: {
    refresh() {
      alert('Refreshing!');
    }
  }
});

components.simple-transition.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['simple-transition'],
  
  isTransitioned: false,
  
  click() {
    this._super();
    this.toggleProperty('isTransitioned');
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

/* PANE */
.pane {
  border: 1px solid #ccc;
  flex: 1;
  overflow: hidden;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.pane--is-transitioning-in {
  position: absolute;
  top: 0;
  width: 100%;
  border: 0;
}

.pane__header {
  border-bottom: 1px solid #ccc;
  padding: 20px;
  opacity: 1;
  font-weight: bold;
}

.pane--is-transitioning-in .pane__header,
.pane--is-transitioning-out .pane__header {
  opacity: 0;
}

.pane__header-action {
  color: blue;
  float: right;
}

.pane__body {
  padding: 20px;
  flex: 1;
}

.pane--is-transitioning-in .pane__body {
  transform: translate3d(100%, 0, 0);
  transition: 1s ease-out;
}

.pane--is-transitioning-out .pane__body {
  transform: translate3d(-100%, 0, 0);
  transition: 1s ease-in;
}

.pane__footer {
  padding: 20px;
  background-color: blue;
  color: white;
}

.pane--is-transitioning-in .pane__footer,
.pane--is-transitioning-out .pane__footer {
  transform: translate3d(0, 100%, 0);
}

/* SIMPLE TRANSITION */
.simple-transition {
  width: 100%;
  overflow: hidden;
}

.simple-transition__stage {
  display: flex;
  width: 200%;
  transition: all 1s;
}

.simple-transition__stage--is-transitioned {
  transform: translate3d(-50%, 0, 0);
}

/* MANUAL TRANSITION */
.manual-transition {
  position: relative;
}

.manual-transition .pane__header {
  transition: 1s all;
}

.manual-transition .pane__body {
  transition: 1s all;
}

.manual-transition .pane__footer {
  transition: 1s all;
}

templates.application.hbs

<h1>Example Animations</h1>
<br>
<br>
<b>Simple Transition:</b>
{{simple-transition}}

<br><br>

<b>Manual Transition:</b>
{{manual-transition}}

<br><br>

<b>Liquid-fire Transition:</b>
{{liquidfire-transition}}
<br>
<br>

templates.components.liquidfire-transition.hbs

{{#liquid-if isTransitioned}}
  {{pane-2}}
{{else}}
	{{pane-1}}
{{/liquid-if}}

templates.components.manual-transition.hbs

{{#if firstPaneIsActive}}
	{{pane-1 isTransitioningOut=firstPaneIsTransitioningOut
           isTransitioningIn=firstPaneIsTransitioningIn}}
{{/if}}

{{#if secondPaneIsActive}}
	{{pane-2 isTransitioningOut=secondPaneIsTransitioningOut
           isTransitioningIn=secondPaneIsTransitioningIn}}
{{/if}}

templates.components.pane-1.hbs

<header class="pane__header">
  Pane 1
</header>

<div class="pane__body">
  Body for pane 1.
</div>

templates.components.pane-2.hbs

<header class="pane__header">
  Pane 2
  <a {{action "refresh" bubbles=false}} class="pane__header-action">Refresh</a>
</header>

<div class="pane__body">
  Body for pane 2.
</div>

<div class="pane__footer">
  I have a footer.
</div>

templates.components.simple-transition.hbs

<div class="simple-transition__stage {{if isTransitioned "simple-transition__stage--is-transitioned"}}">
  {{pane-1}}
  {{pane-2}}
</div>

transitions.js

export default function() {
  this.transition(
    this.childOf('.liquidfire-transition'),
    this.use('explode', {
      pick: '.pane__header',
      use: ['crossFade', { duration: 1000 }]
    }, {
      pick: '.pane__body',
      use: ['toLeft', { duration: 1000 }]
    }, {
      pickOld: '.pane__footer',
      use: ['toDown', { duration: 1000 }]
    }, {
      pickNew: '.pane__footer',
      use: ['toUp', { duration: 1000 }]
    })
  );
}

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"
  }
}