html - 在 CSS 转换完成之前，如何使按钮不可点击？

Question

我正在用纯 CSS 和 HTML 设计一个网站，我试图实现一个类似于这个的转换: https://codepen.io/fox_hover/pen/wYrvod?editors=1100

我的问题是在移动设备上:链接按钮(链接和搜索)在变得可见之前是可点击的，因为过渡只是让它们变得不透明。

我曾尝试使用 display:none、pointer-event:none 或 visibility: hidden 来设计按钮样式，然后让它们仅在框处于 :active 或 :hover 时才可点击；但是它不能解决我的问题。

虽然我知道这可以在 Javascript 中轻松解决，但有没有办法只使用 HTML 和 CSS 解决这个问题(可能通过重新构建/重新考虑我的转换)？谢谢!

<div class="portfolio-item portfolio-effect__item portfolio-item--eff1">
      <img class="portfolio-item__image" src=".." alt="Portfolio Item">
      <div class="portfolio-item__info">
         <div class="portfolio-item__links">
          ...
         </div>
      </div>
</div>

---

.portfolio-item--eff1 .portfolio-item__info {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      opacity: 0;
}
.portfolio-item--eff1:hover .portfolio-item__info {
      transition-property: all;
      transition-duration: 0.4s;
      transition-timing-function: linear;
      transition-delay: 0s;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
}

Answer 1

如果您不想使用 js，那么您可能必须使用某种 css 控制的面纱。

如果您可以让一个元素位于按钮上方(所有可点击区域，甚至可能是 scale(1.1))，那么您可以将其设置为在其他过渡完成时“发现” .您可能可以使用 css 动画来执行此操作，但我现在无法仔细检查。

一般而言，我个人会三思而后行主动阻止用户因动画而点击 CTA。当用户认为已经点击了某个网站后不得不再次开始点击按钮时，这肯定会让用户对网站失去兴趣。

如果您需要继续进行下去，或者它不起作用，请随时发表评论并尝试回来更新我的答案。

希望这对您有所帮助。