Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Twiddle
import Ember from 'ember';
import { adjustCSS } from 'ember-animated/motions/adjust-css';
import move from 'ember-animated/motions/move';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
inset: false,
*transition({ insertedSprites, removedSprites }) {
console.log(arguments[0]);
for (let sprite of insertedSprites) {
sprite.applyStyles({ 'left': '3rem' });
// adjustCSS('margin', sprite);
// move(sprite);
}
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.cell {
padding: 1rem;
margin: 1rem 0;
background: steelblue;
color: white;
}
.cell.inset {
/* margin-left: 5rem;
margin-right: 5rem; */
}
<h1>Welcome to {{appName}}</h1>
{{#animated-value inset use=transition as |compressed|}}
<div class="cell {{if compressed 'inset'}}">
{{if compressed 'COMPRESSED' 'EXPANDED'}}
</div>
{{/animated-value}}
<button type="button" onclick={{action (mut inset) (not inset)}}>Toggle</button> ({{inset}})
<br>
<br>
{{outlet}}
<br>
<br>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2",
"ember-animated": "0.6.1",
"ember-truth-helpers": "2.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.