在 Tailwind 中如何从中心悬停展开？

Question

在 CSS 中，我可以通过悬停扩展：

a {
  --border-color: green;
  --border-width: 5px;
  --bottom-distance: 0px;
  
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

a:hover {
  background-size: 100% var(--border-width);
}

<a href="#">Expand from center</h1><br/>

我一直在阅读以下文档：

• 变换原点
• 过渡属性
• 动画
• 规模

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>

如何在 Tailwind CSS 中从中心展开悬停？

Answer 1

不要过渡

max-width

，而是考虑过渡

transform: scaleX()

。这样的性能更高，因为浏览器每帧执行的工作量比

max-width

少。此外，

transform: scaleX()

还有一个额外的好处，即

transform-origin

可以与它配合使用，从而也解决您的问题：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<a href="#" class="group text-sm">
  Expand from center
  <span class="block mt-4 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 h-0.5 bg-green-600 origin-center"></span>
</a>