Skip to content

Instantly share code, notes, and snippets.

@nishanmiranda
Created March 8, 2016 07:23
Show Gist options
  • Save nishanmiranda/adba26065281d4c40e0c to your computer and use it in GitHub Desktop.
Save nishanmiranda/adba26065281d4c40e0c to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
contentContainer: [],
actions: {
newElement: function() {
this.get('contentContainer').pushObject({
id: Math.random()
});
},
removeElement: function(element) {
this.get('contentContainer').removeObject(element);
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<button {{action 'newElement'}}>
Click for new element
</button>
<br>
{{#each contentContainer as |element|}}
{{#fade-element}}
<span class="fade-in">
{{element.id}}
<button {{action 'removeElement' element}}>
x
</button>
<br>
</span>
{{/fade-element}}
{{/each}}
import Ember from 'ember';
export default Ember.Component.extend({
willDestroyElement() {
this._super(...arguments);
var clone = this.$().clone();
clone.children().removeClass('fade-in')
clone.insertAfter(this.$().parent());
clone.fadeOut();
},
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.fade-in{
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {
background-color: yellow;
opacity:0;
}
to {
background-color: white;
opacity:1;
}
}
{
"version": "0.6.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment