Question

我正在用纯CSS和HTML设计网站，并且试图实现类似于此的过渡： https://codepen.io/fox_hover/pen/wYrvod?editors=1100

我的问题是在移动设备上：链接按钮（链接和搜索）在它们变得可见之前就可以单击，因为过渡只是使它们变得不透明。

我尝试过使用display：none，pointer-event：none或visible：隐藏的样式来设置按钮的样式，然后仅在框为：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。当用户不得不以为自己已经点击过网站之后，必须第二次启动点击按钮时，这无疑是一种诱使用户对网站失去兴趣的方法。

如果您需要继续进行操作，否则无法正常工作，请随时发表评论并尝试回来更新我的答案。

希望这会有所帮助。

Answer 2

我知道了；我只需要在更改可见性时使用CSS过渡（与实际过渡效果的持续时间相同）来增加延迟。

.portfolio-item--eff1:hover .portfolio-item__links {
  visibility: visible;
  transition: visibility 0ms 0.3s;
}
.portfolio-item__links{
  visibility: hidden;
}

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

2 个答案: