Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Parent animator changing position V2
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,
things: null,
init() {
this.set('things', this.makeItems(2));
this.initialThings = [...this.things];
},
actions: {
activate(thing) {
this.set('selectedThing', thing.id);
// mock a change in the list sorting
if (thing.id % 2 === 0) {
this.set('things', this.get('things').sortBy('message'));
} else {
this.set('things', this.get('things').sortBy('id'));
}
}
},
*transition({ keptSprites, duration }) {
// console.log(arguments[0]);
for (let sprite of keptSprites) {
move(sprite, { duration, easing: easeInAndOut });
}
},
// iconTransition: fade
*iconTransition({ insertedSprites, keptSprites, removedSprites, duration }) {
console.log(arguments[0]);
for (let sprite of insertedSprites) {
// sprite.startTranslatedBy(20, 1);
let x = sprite.absoluteFinalBounds.left + 100;
let y = sprite.absoluteFinalBounds.top;
sprite.startAtPixel({ x, y });
console.log(sprite.element.offsetParent, sprite.finalBounds);
move(sprite, { duration, easing: easeInAndOut });
fadeIn(sprite, { duration });
}
for (let sprite of removedSprites) {
// sprite.endTranslatedBy(20, null);
// move(sprite, { duration, easing: easeInAndOut });
fadeOut(sprite, { duration });
}
},
makeItems(count = 5) {
let result = Ember.A();
for (let i = 0; i < count; i++) {
result.push(makeRandomItem(i));
}
return (result);
},
});
function makeRandomItem(index) {
var messages = ["Z Dwight", "Y Stanley", "X Kelly", "W Ryan", "V Kevin"];
var images = ['https://pbs.twimg.com/profile_images/549268771484229632/WnatiHzT_400x400.jpeg', 'https://pbs.twimg.com/profile_images/1839546020/florida_stanley_400x400.jpg', 'https://pbs.twimg.com/profile_images/71405458/2928282474_24807334d7_400x400.jpg', 'https://pbs.twimg.com/profile_images/740436182107049984/y0N8Sqbi_400x400.jpg', 'https://pbs.twimg.com/profile_images/118888142/Brian_Baumgartner_134198_400x400.jpg'];
return { id: index, message: messages[index], image: images[index] };
// Math.round(Math.random()*1000)
}
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.thing {
width: 50vw;
padding: 1rem;
margin: 0.5rem 0;
color: white;
background: steelblue;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
/* overflow: hidden; */
}
.icon-container {
position: relative;
width: 50px;
}
.icons {
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<h1>Click the first item ⬇️</h1>
<p>Selected Thing ID: <code>{{selectedThing}}</code></p>
{{#animated-container}}
{{#animated-each things key="id" use=transition duration=duration as |thing|}}
<div class="thing" {{action 'activate' thing}}>
<p>[{{thing.id}}] {{thing.message}}</p>
{{#animated-container class="icon-container"}}
{{#animated-if (eq thing.id selectedThing) use=iconTransition duration=duration}}
<div class="icons enabled">✅</div>
{{else}}
<div class="icons disabled">❎</div>
{{/animated-if}}
{{/animated-container}}
</div>
{{/animated-each}}
{{/animated-container}}
{
"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.