diff --git a/app/components/palettes-list.hbs b/app/components/palettes-list.hbs index eafc98300..cde883bfd 100644 --- a/app/components/palettes-list.hbs +++ b/app/components/palettes-list.hbs @@ -1,8 +1,8 @@ -
- {{#each @palettes as |palette|}} + + {{#animated-each @palettes use=this.transition as |palette|}} - {{/each}} -
\ No newline at end of file + {{/animated-each}} + \ No newline at end of file diff --git a/app/components/palettes-list.js b/app/components/palettes-list.js index 22227de95..03ff44a6b 100644 --- a/app/components/palettes-list.js +++ b/app/components/palettes-list.js @@ -1,4 +1,20 @@ import Component from '@glimmer/component'; +import { fadeOut } from 'ember-animated/motions/opacity'; +import move from 'ember-animated/motions/move'; export default class PalettesListComponent extends Component { + *transition({ keptSprites, insertedSprites, removedSprites }) { + for (let sprite of insertedSprites) { + sprite.startTranslatedBy(0, -sprite.finalBounds.height / 2); + move(sprite); + } + + for (let sprite of keptSprites) { + move(sprite); + } + + for (let sprite of removedSprites) { + fadeOut(sprite); + } + } }