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; | |
} | |
*/ |
{ | |
"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