Skip to content

Instantly share code, notes, and snippets.

@elidupuis
Last active July 8, 2019 19:15
Show Gist options
  • Save elidupuis/962f68f31b6545dea06f10736fb385b2 to your computer and use it in GitHub Desktop.
Save elidupuis/962f68f31b6545dea06f10736fb385b2 to your computer and use it in GitHub Desktop.
Simply icon slide animation
import Ember from 'ember';
// import fade from 'ember-animated/transitions/fade';
import move from 'ember-animated/motions/move';
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity';
import { easeIn, easeOut, easeInAndOut } from 'ember-animated/easings/cosine';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
isThingActive: false,
showThingActions: true,
duration: 1000,
actions: {
activate() {
this.toggleProperty('isThingActive');
}
},
// *transition({ insertedSprites, removedSprites }) {
// console.log(arguments[0]);
// for (let sprite of insertedSprites) {
// move(sprite);
// }
// },
// iconTransition: fade
*iconTransition({ insertedSprites, keptSprites, removedSprites }) {
console.log(arguments[0]);
for (let sprite of insertedSprites.concat(keptSprites)) {
console.log(sprite.initialBounds);
sprite.startTranslatedBy(50, 0);
console.log(sprite.initialBounds);
move(sprite, { easeInAndOut });
fadeIn(sprite);
}
for (let sprite of removedSprites) {
console.log(sprite.finalBounds);
sprite.endTranslatedBy(50, 0);
console.log(sprite.finalBounds);
move(sprite, { easeInAndOut });
fadeOut(sprite);
}
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.thing {
width: 50vw;
padding: 1rem;
color: white;
background: steelblue;
display: flex;
justify-content: space-between;
align-items: center;
top: 15rem;
position: absolute;
overflow: hidden;
cursor: pointer;
}
/* .thing.is-active {
top: 30rem;
}
*/
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<div class="wrapper">
{{!-- {{#animated-value isThingActive use=transition as |isActive|}} --}}
{{!-- {{/animated-value}} --}}
<div class="thing {{if isThingActive 'is-active'}}" {{action 'activate'}}>
<p>Some little thing (click me).</p>
{{#animated-if isThingActive use=iconTransition duration=duration}}
<div class="activeIcons">
🔁✅
</div>
{{else}}
<div class="activeIcons">
🛑❎
</div>
{{/animated-if}}
</div>
</div>
{
"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