How to use css transitions in aurelia-animator-css?

Framework Knowledge
1

Based on Mr @EisenbergEffect post we cannot use CSS transitions with aurelia-animator-css.

Please note that the CSS-Animator only supports animations through the animation property and NO transitions.

Why does exist this limitation?

I think most the time using transitions is so easier than animations. It would be great if we have this feature in Aurelia vNext.

What do you think?!

2

Hi @HamedFathi,

the reason for that is that we cant effectively detect when a transition has ended. Animations fire a animationstart event which we can listen for and that way maintain a nice workflow of properly adding/removing classes on time.

One of the reason we sticked with this is that it provides the bare minimum, that is also supported by ancient browsers. More modern approaches would be likely starting to use the web animations API, which sadly though still isn’t that supported as it should be after all those years. Also the css animator is a bare minimum implementation for simple anims. If you’re looking for other implementations take a look at Velocity or try creating your own adapter for other libraries such as GSAP etc.

1 Like
3

Would it be possible to use this? https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

1 Like
4

Likely yes, the issue is the starting event, since it has a very low level of compatibility.

1 Like
5

@zewa666

If you’re looking for other implementations take a look at Velocity or try creating your own adapter for other libraries such as GSAP etc.

I know that but I prefer pure CSS.

About transitionend as Mr @EisenbergEffect mentioned Can you check this link?

transition-start

I am not good at this topic but It can be a polyfill beside aurelia-animate-css.

Or Detecting transition start

6

If you could create an issue and link a minimal example with a transition (and Animation to show the wished behavior) that would help me tremendously to try adding this feature

1 Like
7

@zewa666

As you asked me ISSUE
But I’m not optimistic the sample is so tricky. I do not think it can be used for all scenarios.

8

OK but what would be a minimal example you want to work using transitions? Its just easier having to work against a goal so I know whether it works or not

9

I have not specific problem for now.

But I am just wondering how Vue support all possible combinations even transitions?

Vue Enter/Leave & List Transitions

Do you know about their techniques?

10

Oh ok thought there is something specific you wanted to make sure it works. Thanks for the link i’ll check their implementations

1 Like
11

Here is your goal. Replicate this. I know I could do a timer the same as the animation to get close, but I would like something a little more native.

12

Bumping this. I would really like an example of how this could be done, or how we can get this done in vNext.

2 Likes
13

@bigopon Can you help us out here?

1 Like
14

@brandonseydel what you described would be great although doesnt fit the current solution, which merely adds/removes classes at given timeslots. Your advised solution would have to be baked into templating and binding and offer a proper animation lifecycle. Which frankly would be cool. Im just not dealing with anims at all the last few months so I cant put time aside for that. I’d be super happy if somebody volunteers to take over the animation part of Aurelia. I can do the best to offer ideas and hints then