LF Demo - Animated Drawer #1

components.animated-drawer.js

import Ember from 'ember';

const transitionEndEvent = '';

export default Ember.Component.extend({
  classNames: [':animation-drawer','open'],
  open: false,
  isOpen: false,
  _onCloseDrawer: null,
  _setOnCloseDrawer(){
  	this.set('_onCloseDrawer', 
      Ember.run.bind(this, function(){
        this.set('isOpen', false);
  	    this.$.off(transitionEndEvent,    this.get('_onCloseDrawer'));
    }));  
    
	},
                                      
  actions: {
    openDrawer(){
      this.setProperties({
 				isOpen: true,
  			open: true
			});
    },
    
    closeDrawer(){
      this.$.on(transitionEndEvent, this.get('_onCloseDrawer'));
      this.set('open', false);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Animated Drawer Example'
});

styles.app.css

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

.animation-drawer-container {
	position: relative;
}

.animation-drawer {
  backgroun-color: #555;
  color: #eee;
	position: absolute;
  height: 100vh;
  width: 100vw;
  transform: translateY(100vh);
  transition: transform 1s ease;
}

.animation-drawer.open {
	transform: translateY(0vh);
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#animated-drawer as |closeDrawer|}}
I'm an open drawer<br/>
<a href="#" {{action closeDrawer}}>Close Me</a>
{{/animated-drawer}}
<br>
<br>

templates.components.animated-drawer.hbs

{{#if isOpen}}
  {{yield (action "closeDrawer")}}
{{else}}
	<a href="#" {{action "openDrawer"}}>Open Me</a>
{{/if}}

twiddle.json

{
  "version": "0.4.7",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.7/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember-template-compiler.js"
  }
}