Comment transformer les animations : survol en interactions clic/touch pour les appareils mobiles ?

Effets de survol multiplateforme : transformer :hover en clic/touch

Les appareils mobiles présentent un défi unique pour les animations CSS déclenchées par :flotter. Pour garantir une expérience utilisateur transparente, les développeurs doivent souvent adapter ces effets pour fonctionner avec des événements tactiles ou clics. Cet article explore une solution simple pour convertir les animations :hover en interactions basées sur des clics pour les appareils mobiles.

L'exemple suivant montre une animation déclenchée par :hover sur une barre d'informations. Lorsque la largeur de l'écran dépasse 700px, l'animation reste déclenchable au survol. Cependant, pour les écrans plus petits, l'animation est modifiée pour être déclenchée par un événement de clic.

Animation CSS :

.info-slide {
  transition: height .4s ease-in-out;
  height: 60px;
  background: url(../images/blue-back.png);
}

.info-slide:hover {
  height: 300px;
}

Requête multimédia pour une transition réactive :

@media screen and (max-width: 700px) {
  .info-slide {
    cursor: pointer;
  }

  .info-slide:active {
    height: 300px;
  }
}

Dans cette solution, nous utilisons le sélecteur :active en conjonction avec :hover. Selon w3schools, cette approche transforme efficacement l'animation en une interaction par clic ou par toucher lorsque la largeur de l'écran est inférieure à 700 px.

Le test de cette solution dans un environnement mobile vérifie que l'animation répond en conséquence, offrant ainsi une réponse utilisateur cohérente. expérience sur tous les appareils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!