Comment puis-je rendre les boutons non cliquables jusqu'à ce que la transition CSS soit terminée?

Question

Je conçois un site web en CSS et HTML pur, et j'essaie de mettre en place une transition similaire à celle-ci: https://codepen.io/fox_hover/pen/wYrvod?editors=1100

Mon problème est sur les appareils mobiles : les boutons de liens (lien et recherche) sont cliquables avant de devenir visibles, car la transition les rend simplement opaques.

J'ai essayé de styliser les boutons avec display:none, pointer-event:none ou visibility: hidden, puis de les rendre cliquables une fois que la boîte est :active or :hover; cependant cela ne résout pas mon problème.

Je sais que cela peut être facilement résolu en JavaScript, est-il possible de régler le problème en utilisant uniquement HTML et CSS (peut-être en restructurant ou en repensant ma transition)? Merci!

          ...

---

.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

Si vous essayez de ne pas utiliser JavaScript, vous devrez peut-être utiliser une sorte de voile contrôlé par CSS.

Si vous parvenez à positionner un élément au-dessus du bouton (toute la zone cliquable, probablement même à scale(1.1)), vous pourrez probablement le configurer pour se 'découvrir' lorsque votre autre transition se termine. Vous pourriez probablement le faire avec une animation CSS, bien que je ne puisse pas vérifier à nouveau pour le moment.

En général, je réfléchirais à deux fois avant d'empêcher activement les utilisateurs de cliquer sur des CTA en raison de l'animation. C'est un moyen sûr de faire perdre de l'intérêt aux utilisateurs pour un site Web lorsqu'ils doivent recommencer à cliquer sur des boutons une deuxième fois après avoir pensé les avoir déjà cliqués.

Si vous avez besoin de plus d'informations, ou si cela ne fonctionne pas, n'hésitez pas à commenter et à essayer de revenir mettre à jour ma réponse.

J'espère que cela vous aidera.

Answer 2

J'ai trouvé la solution; il suffisait simplement d'ajouter un délai lors du changement de visibilité, en utilisant une transition CSS (avec la même durée que l'effet de transition réel).

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