Form check

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  state: 'one',
  
  actions: {
  	changeState: function(val){
    	this.set('state', val);
    }
  }
});

helpers.eq.js

import Ember from 'ember';

export function eq([lhs, rhs]) {
  console.log(lhs, rhs)
  return lhs === rhs;
}

export default Ember.Helper.helper(eq);

styles.app.css

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

.controls {
	overflow: visible;
}
.controls > div {
	overflow: visible;
}


button {
  	color: black;
		background: yellow;
		padding: 20px 10px;
}

.main-controls {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

{{#liquid-if (eq state 'one') class="controls"}}
		<div class="main-controls">
				<div class="some-buttons">
					<button>AAA</button>
					<button>BBB</button>
				</div>
				<div class="some-more-buttons">
					<button>CCC</button>
					<button>DDD</button>
					<button {{action 'changeState' 'two'}}>Toggle something</button>
				</div>
			</div>
      
{{else if (eq state 'two')}}
		<div class="secondary-controls">
				<button>EEE</button>
				<button {{action 'changeState' 'one'}}>Toggle again</button>
		</div>

{{/liquid-if}}

transitions.anim-one.js

import { animate, Promise } from 'liquid-fire';

export default function (a,b,c,d) {


	const dur = 800;
  
		return Promise.all([
		animate(this.oldElement, {
			translateY: -60,
			opacity: [0, 1]
		}, {
			easing: [0.68, -0.55, 0.265, 1.55],
			duration: dur,
		}),
		animate(this.newElement, {
			opacity: [1, 0],
			translateY: [0, -60]
		}, {
			easing: [0.54,-0.34,0.4,1.02],
			duration: dur
		})
	]);
	
}

transitions.js

export default function(){
	this.transition(
		this.hasClass('controls'),
		// this.childOf('.zz'),
		// this.fromValue(true),
		this.use('anim-one', 1,  {
			duration: 600
		})/*,
		this.reverse('anim-one', -1,  {
			duration: 600
		})*/
	);
}

twiddle.json

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