These are chat archives for angular/angular-2-ionic-2

24th
Mar 2015
Andrew Joslin
@ajoslin
Mar 24 2015 14:24
awesome, thanks.
so we want to start on page/component transitions & animations, since it's such a huge part of Ionic
if I have a parent component with PageA instantiated inside, and I want to animate in PageB, is there a way yet to:
  1. Instantiate PageB programatically
  2. Have enough control over the element to animate it in
  3. Append it to its parent as PageA animates out, then remove PageA after the animation
Miško Hevery
@mhevery
Mar 24 2015 16:26
We don't have animations yet, it is something we will be adding once the core is under control.
I think you and @matsko should talk about the requirements, as he will be doing the work.
Andrew Joslin
@ajoslin
Mar 24 2015 17:05
with ngAnimate 1, ngAnimate just didn't do what we needed it to
especially for things like swipe to go back
matias we should talk, but it might be better if ionic just uses the low level angular2 tools to build its own animations & gestures
are interactive animations a plan for ng2 animations, matias?
I mean, we have a lot of stuff already built that we'd love to just plugin to angular2
if we can just have access to angular2's low level "create/remove a component and do dom things with it"
The best case though is that abgular2 animate does it all.
Miško Hevery
@mhevery
Mar 24 2015 17:16
We have not implemented the animation hooks yet. Once we have them, you are welcome to use them. I think you should be part of the discussion when we talk about animation, so that we can have the right set of hooks for you.
As of right now animation is low priority for us, and we will probably not start work on it until May/June time frame.
Matias Niemelä
@matsko
Mar 24 2015 17:24
@ajoslin I'll have some info for you next week
the plan for the next two weeks is to get the foundation of animations (CSS animations) to work in ngAnimate2
Matias Niemelä
@matsko
Mar 24 2015 17:29
then me and Misko will get into a better JS API and low level integration/hooks
Andrew Joslin
@ajoslin
Mar 24 2015 17:29
OK
Matias Niemelä
@matsko
Mar 24 2015 17:29
and then ngTimeline
Andrew Joslin
@ajoslin
Mar 24 2015 17:30
we'd love to help in any way we can in ionic
basically as soon as it's ready we'll be ready to use it. or earlier.
Matias Niemelä
@matsko
Mar 24 2015 17:30
yeah we should pair with Thomas to get ideas
I want to redo the JS animation API
it sucks in ngAnimate 1.x
Andrew Joslin
@ajoslin
Mar 24 2015 17:31
interactive animations is also a huge deal
eg swipe-to-go-back on ios
or swipe out a sidemenu
we do all that with set transition-duration to 0, set some styles, when the user lets go remove the styles and resume transition-duration
Matias Niemelä
@matsko
Mar 24 2015 17:31
if we can figure out a better Runner API with cancellable observables
yeah
that stuff is simple with $animateCss
but it's more of how the UI layer communicates with the data/scope layer
Andrew Joslin
@ajoslin
Mar 24 2015 17:36
yeah
Matias Niemelä
@matsko
Mar 24 2015 17:36
$animateCss is freaking cool
Andrew Joslin
@ajoslin
Mar 24 2015 17:36
where is it?
I just tried googling it
Matias Niemelä
@matsko
Mar 24 2015 17:36
still in a PR waiting on Pete
Andrew Joslin
@ajoslin
Mar 24 2015 17:36
ah
Matias Niemelä
@matsko
Mar 24 2015 17:37
$animateCss(element, { addClass: '...', removeClass:
{ addClass, removeClass, duration: 10, from: { color: 'red' }, to : { 'color': 'blue' }, easing: 'out' }
and it figures out everything
and returns a promise
Andrew Joslin
@ajoslin
Mar 24 2015 17:38
ok cool
so when the user lets go i would fire off $animateCss
Matias Niemelä
@matsko
Mar 24 2015 17:39
you would still run through $animate
but if you have a JS animation
and you want to make use of ngAnimate's CSS driver
you can use $animateCss inside of your JS animation
Andrew Joslin
@ajoslin
Mar 24 2015 17:39
right
yeah right now we don't use ngAnimate at all in Ionic's internals
Matias Niemelä
@matsko
Mar 24 2015 17:39
yep
Andrew Joslin
@ajoslin
Mar 24 2015 17:40
hopefully angular2's ngAnimate can have a better story
it would be awesome if a gesture-driven animation could have a proper abstraction
Matias Niemelä
@matsko
Mar 24 2015 17:40
yeah we need to plan it
the good thing is that ngAnimate in 2.0 will be for 1.5+ as well
since the code will be shared
Andrew Joslin
@ajoslin
Mar 24 2015 17:40
good
Matias Niemelä
@matsko
Mar 24 2015 17:40
like the router
so whatever we figure out now we may be able to port to 1.x
Andrew Joslin
@ajoslin
Mar 24 2015 17:42
if Ionic2 could start building out some prototype animations now or very soon .. I think that would be good for everyone
that's all we need to start an abstraction
is there really no way right now to tell a component to be destroyed, and to create & attach itself to a parent?
Matias Niemelä
@matsko
Mar 24 2015 17:44
@mhevery knows this stuff
Andrew Joslin
@ajoslin
Mar 24 2015 17:47
ParentComponent {
  let newChild = new ChildComponent();
  attach(this, newChild);
  newChild.element.classList.add('animate-in');
  this.currentChild.element.classList.add('animate-out');
  this.currentChild.element.on('transitionend', => { this.currentChild.remove() })
}
basically, all we need at a low level is this kind of thing.
This message was deleted
if we use DynamicComponent we can get part of the way there, but I'm not sure about removing child components
Adam Bradley
@adamdbradley
Mar 24 2015 17:55
I know I already talked with @matsko at ngconf about this, but just wanted to bring up again the ability for interactive view transitions, and the best approach to do this
So you can navigate one view forward, then swipe from left to right and go back a page, but the swipe is interactive with the drag
Adam Bradley
@adamdbradley
Mar 24 2015 18:02
This is an example of what Ionic does right now with interactive view transitions. Go to page 2, then in the far left edge, drag from left to right to swipe back: http://adamdbradley.github.io/ionic-present/demos/swipe-back/index.html#/
There's a handful of animations all happening at the same time, so it's not just interacting with just one element