Skip to content

Instantly share code, notes, and snippets.

@kimroen
Created June 25, 2018 07:41
Show Gist options
  • Save kimroen/d98283f6b7070974cb9f638cfff12e24 to your computer and use it in GitHub Desktop.
Save kimroen/d98283f6b7070974cb9f638cfff12e24 to your computer and use it in GitHub Desktop.
Animated Beacon
import Component from '@ember/component';
import move from 'ember-animated/motions/move';
import scale from 'ember-animated-motions/scale';
import { parallel } from 'ember-animated';
export default Component.extend({
showThing: false,
transition: function * ({ receivedSprites, sentSprites }) {
receivedSprites.forEach(parallel(scale, move));
sentSprites.forEach(parallel(scale, move));
},
actions: {
launch() {
this.set('showThing', true);
},
dismiss() {
this.set('showThing', false);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
{{#animated-beacon group="one"}}
<button {{action "launch"}}>Launch</button>
{{/animated-beacon}}
{{#animated-if showThing group="one" use=transition duration=500}}
<div class="message" {{action "dismiss"}}>
Hello
</div>
{{/animated-if}}
{
"version": "0.14.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": "2.18.2",
"ember-template-compiler": "2.18.2",
"ember-testing": "2.18.2"
},
"addons": {
"ember-data": "2.18.2",
"ember-animated": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment