How can we change the type of animation?

[garethharding]

I've seen we can change transition speed an easing with...

openTransition="10ms ease-out" closeTransition="10ms ease-out".

Is there a way to change the animation itself? I.e. having it fade in alone rather than scaling to normal size and fading in.

Great work BTW. Very useful.

[willshowell]

Unfortunately that isn't yet supported. I'm not aware of any possible workaround in the mean time, but I expect it won't be too difficult to implement!

[willshowell]

This has turned out to be a lot harder than I imagined 😓

I initially tried investigating ways to declare the animation from an injection token's value, but as far as I've been able to find, that isn't possible.

Next I tried using the AnimationBuilder paired with directive placed on the popovers template... which works great in the context of passing around custom animation values and :enter animations, but I'm struggling to figure out how to delay the template detachment until the :leave animation is complete.

If anyone has any suggestions or examples of other libraries that have done this, I'd be happy to hear them!

WIP branch

[ovitrif]

It would be really nice if this would be supported by Angular. A lot of times I find the perfect component where the only thing I would want to change are the transitions :/

[willshowell]

@garethharding for a workaround you could use something like this... Note that it would apply to all popovers in your application and could be subject to break in future versions:

import { SatPopover } from '@ncstate/sat-popover';
import { trigger, transition, style, animate } from '@angular/animations';

const newAnimation = trigger('transformPopover', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('{{openTransition}}', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('{{closeTransition}}', style({ opacity: 0 }))
  ])
]);

SatPopover['decorators'][0].args[0].animations = [newAnimation];

[garethharding]

Hey @willshowell, that's great!...

Really appreciate your work on this project ;)

[fxck]

Was there any progress from angular side on this?

Also this doesn't quite work unfortunately.

[willshowell]

@fxck I never filed an issue for it. I figure support for https://github.com/angular/angular/issues/13764 would allow you to do something like this

@Component({
  ...inherited,
  animations: [customAnimation],
})
class CustomPopover extends SatPopover {}

which would be great. A DI solution would also be nice and easy enough to support, but I don't think the animation builder is powerful enough for that. I'll try and revisit this soon and file a proper issue.

Regarding the workaround, I was able to get it working here.