Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transform Property Doesn't Work After Using Animate.css #1117

Closed
ApplePieGiraffe opened this issue Sep 18, 2020 · 3 comments
Closed

Transform Property Doesn't Work After Using Animate.css #1117

ApplePieGiraffe opened this issue Sep 18, 2020 · 3 comments

Comments

@ApplePieGiraffe
Copy link

Hi, there!

In a few of my projects, I've noticed that after I animate an element by adding the animation classes from Animate.css to it, I can no longer use the transform property on that element in my own stylesheet (i.e., the transform property in my stylesheet seems to have no effect, even if my stylesheet is linked after the Animate.css stylesheet in my markup).

Is there any reason why that happens? Or am I doing something wrong?
@eltonmesquita
Copy link
Collaborator

This is the way CSS works. animate.css is just overwriting any previous transform declaration (we use transform in most of the animations). The easy and quick "fix" is to add a wrapper to the element and animate this wrapper instead.

I'm closing this as it's not an issue with the library. I'll try to add a section in the docs with guidelines about this.

@eltonmesquita eltonmesquita mentioned this issue Sep 18, 2020
Open
@ApplePieGiraffe
Copy link
Author

ApplePieGiraffe commented Sep 18, 2020 via email

@eltonmesquita eltonmesquita mentioned this issue Sep 27, 2020
Closed
@eltonmesquita eltonmesquita mentioned this issue Jan 8, 2021
Closed
@Directory
Copy link

Directory commented Jan 14, 2021 •
edited

this isn't a fix but if u can use the animateCSS javascript wrapper function the docs suggested. it removes the animation class after the animation ends so the transform styles wont stick. however while an animation is playing your own transform styles will still get overridden so it may appear to pop in and out of position randomly. i advise the "wrapper" fix.

if you have too much time on your hands and disregard your mental and emotional wellbeing then there is a theoretical ultimate fix:

with js read the computed transform styles that you applied. then still within js read the animate.css keyframe style. at this point linking this lib from a cdn and hardcoded html classes is out of the question u would need some kind of css>js loader to read animate.css styles for your target animation. now write some sort of frankenstein transform style masher that can not only combine different types of transformations but also combine and offset the same kinds.
so if an animation keyframe had transform: scale(.5) translateX(50%); and your styles had transform: translateX(-10%); then the output combination of the 2 would be transform: scale(.5) translateX(40%);. better hope that both kinds of transformations are using the same unit too else you may need calc(). Did i mention combining multi transform functions such as rotate3d() translate()? good luck with that. Anyway if combining the transform styles is successful all thats left is constructing the final css animation keyframe string + an animation class and injecting it into <head> as a <style> tag. then add that animation class to the target element and dispose of the style tag and class on animationend.

honestly...maybe just use a wrapper...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@eltonmesquita @Directory @ApplePieGiraffe