英文:
Trying to make a hover animation with GSAP in nextjs 13 and tailwind
问题
我正在使用Next.js 13（TypeScript）、Tailwind和GSAP制作网站，想知道是否可以制作类似于附图中的动画效果（抱歉我的绘画技巧不太好）。
这不是一个按钮，只是一个装饰词，在悬停时会更改为具有不同样式的另一个词。
英文:
I'm making a website with Nextjs 13 (TypeScript), tailwind and GSAP, I was wondering if it's possible to make some kind of animation like in the screenshot enclosed (sorry for my great paint skills).
is not a button, is just a decoration word that will change on hover for another with different style.
答案1
得分: 1
这使用了带有溢出隐藏和平移的网格布局，是纯CSS的解决方案。
<div class="group m-5 grid h-10 w-20 cursor-pointer grid-cols-2 overflow-hidden rounded-lg border-2 border-orange-400">
<div class="grid h-10 w-20 -translate-x-full -translate-y-[2px] place-content-center rounded-lg border-2 border-orange-400 bg-orange-400 text-center font-bold text-white transition-transform duration-500 group-hover:translate-x-0"><span>很棒</span></div>
<div class="h-10 -translate-x-full -translate-y-[2px] rounded-lg border-orange-400 font-bold text-orange-400 transition-transform duration-500 group-hover:translate-x-full"><span class="block w-20 py-2 text-center">好</span></div>
</div>
链接: https://play.tailwindcss.com/J45fD2mYLA
英文:
This uses a grid layout with overflow hidden and translate for a CSS only solution.
<div class="group m-5 grid h-10 w-20 cursor-pointer grid-cols-2 overflow-hidden rounded-lg border-2 border-orange-400">
<div class="grid h-10 w-20 -translate-x-full -translate-y-[2px] place-content-center rounded-lg border-2 border-orange-400 bg-orange-400 text-center font-bold text-white transition-transform duration-500 group-hover:translate-x-0"><span>GREAT</span></div>
<div class="h-10 -translate-x-full -translate-y-[2px] rounded-lg border-orange-400 font-bold text-orange-400 transition-transform duration-500 group-hover:translate-x-full"><span class="block w-20 py-2 text-center">GOOD</span></div>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论