search

formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://auto-animate.formkit.com
MIT License
12.66k stars 224 forks source link

useRef element results in z-index issue's. #81

Open is-it-ayush opened 2 years ago

is-it-ayush commented 2 years ago

Problem

I have a component that slides from left to right over on top of a list. Everything works fine without auto-animate. As soon as ref={parent} is added to the list to make it lively (with auto-animate). The list somehow goes on top of that component making that component practically un-useable. How should I got about fixing this. I am using tailwind but the z-index property does not seem to work if i use auto-animate.

Current Behaviour:

image

Expected Behaviour:

image

MarlonX19 commented 5 months ago

I had the same issue just yesterday when I had a similar scenario. The thing is not related to z-index apparently, instead it's related to the position relative that the div will receive when using the ref={parent}, at least that's what I found out after inspecting the code, take a look throught the dev tools and you'll probably see that there's an inline position relative added to the parent div!

I wonder oif maybe there's a reason for that?!

workaround: I added a position: static !important to the div's styles and it solved the issue for now.

I've been busy with the back log of tasks but I might want to look deeper into this issue and maybe solve it.