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


#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.


#3

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


#4

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


#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


#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


#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.