英文:
Tailwind margin animation
问题
我有这个div叠加效果。显示效果正常，但边距不正常。
<div className='relative aspect-[4/3] bg-black group'>
<div className='transform duration-1000 mr-0 group-hover:mr-10
hidden group-hover:block absolute bg-white top-0 mt-[40px] right-0 p-10'>
</div>
</div>
英文:
I have this div overlay effect. The display effect is working, but the margin is not.
<div className='relative aspect-[4/3] bg-black group'>
<div className='transform duration-1000 mr-0 group-hover:mr-10
hidden group-hover:block absolute bg-white top-0 mt-[40px] right-0 p-10'>
</div>
</div>
答案1
得分: 0
The margin hover is working (though I would recommend you transition transform properties instead of margin) but your issue is that you have hidden group-hover:block which is attempting to transition display which is not a transitionable property.
Instead you can transition opacity -> opacity-0 group-hover:opacity-100 as shown in this example link
And to use translate instead of margin transition -> group-hover:-translate-x-10 see this example link
Transitioning transform instead of margin is recommended for performance reasons. Link
英文:
The margin hover is working (though I would recommend you transition transform properties instead of margin) but your issue is that you have hidden group-hover:block which is attempting to transition display which is not a transitionable property.
Instead you can transition opacity <strike>hidden group-hover:block</strike> -> opacity-0 group-hover:opacity-100 as shown in this example https://play.tailwindcss.com/FmsPzOn6P5
And to use translate instead of margin transition <strike>mr-0 group-hover:mr-10</strike> -> group-hover:-translate-x-10 see this example https://play.tailwindcss.com/5WcZvKUFRO
Transitioning transform instead of margin is recommended for performance reasons see here https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS#animating_on_the_gpu
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论