Mechanism for animations between ember components
MIT License
The segue-container-component
can animate between your ember components.
Example:
{{segue-container
component-name = componentName
segue-for = segueFor
blogPostpinned-to-blog-post-pane = blogPost
areCommentsShown-from-blog-postpane = areBlogPostCommentsShown
searchTerm-to-search-pane = searchTerm
}}
component-name
defines which component should be shownsegue-for
lets you define the transition between the old and the new component[property name]-{pinned-to,to,from}-[component name]
define properties on the component
pinned-to
: Change triggers animation, passed into .create()
as inital valueto
: Two-way binding (passed-in value wins), passed into .create()
as inital valuefrom
: Two-way binding (component's value wins)jspm install ember-segue-container-component=github:MajorBreakfast/ember-segue-container-component
import Ember from 'ember'
import SegueContainerComponent from 'ember-segue-container-component'
var App = Ember.Application.create({
SegueContainerComponent
})
I did a talk on January 29th at the Ember Munich Meetup about this. The recording is available on YouTube.
Can I contribute?
Sure :)
Why JavaScript controlled animations?
I'm thinking about adding swipe based switching between components similiar to the back gesture on iOS. That's why I chose to define the animations via JS in favor of CSS animations or transitions.
Why call it "segue", not "transition"?
The word "transition" already refers to a route transition in the emberverse. "Animated transition" is too long, so I'm calling it "segue" like it's called in Cocoa Touch.
Is ember-cli supported?
No. Adding compatibility should be straightforward, however. Contributions are welcome!