Interaction Web front-end: implémentez l'effet d'animation zoom instantanée lorsque le bouton clique

Cet article vise à résoudre le problème selon lequel l'animation de zoom instantanée ne peut pas être lue après qu'un bouton a été cliqué dans le développement Web, et explique en détail comment utiliser l'attribut de la pseudo-claire et de la transformation: SCAL () du CSS pour atteindre l'animation en douceur et naturel de la taille du bouton avec transition. En séparant la logique d'animation de la logique métier, assurez-vous l'expérience utilisateur et la maintenabilité du code.

Analyse des problèmes: pourquoi l'effet d'animation ne peut-il pas être réalisé en modifiant directement la largeur?

Dans le développement Web, nous devons souvent ajouter des effets dynamiques aux éléments d'interaction des utilisateurs (tels que les boutons) pour améliorer l'expérience utilisateur. Cependant, la modification des propriétés de style d'un élément directement via JavaScript (par exemple élément.style.width = '45% '; élément.style.width = '50%';) n'atteint pas les effets d'animation lisses. Cela est principalement dû au fait que le code JavaScript est exécuté de manière synchrone, et le navigateur appliquera immédiatement le résultat final de tous les modifications de style sans rester à l'état du milieu, donc l'attribut de transition ne peut pas fonctionner.

De plus, l'exigence de l'utilisateur d'origine est de modifier le bouton "taille" plutôt que de "largeur". Le réglage direct de la largeur peut provoquer un déséquilibre proportionnel des éléments, et nous voulons généralement que le bouton "zoome" ou "rétrécisse" en proportion égale lorsque vous cliquez sur. Cet effet est plus conforme au sentiment intuitif de l'utilisateur de "changements de taille".

Solution centrale: exploite CSS: Pseudo-classe active et propriétés de transformation

Pour implémenter l'animation de mise à l'échelle instantanée lorsqu'un bouton est cliqué et pour assurer la lecture en douceur de l'animation, la meilleure pratique consiste à combiner CSS: Pseudo-classe active, propriété Transform: Scale () et propriété de transition.

• : Pseudo-classe active : Lorsque l'utilisateur clique et maintient le bouton gauche de la souris (ou appuyez sur une longue appuyer sur l'écran tactile), l'élément sera dans: actif. Le style CSS défini dans cet état prend effet pendant le clic et le curriculum vitae après la libération de la souris.
• Transform: Scale () : Il s'agit d'une fonction de transformation CSS utilisée pour faire évoluer les éléments dans des dimensions bidimensionnelles. L'échelle (x, y) peut régler respectivement les rapports de mise à l'échelle dans les directions horizontales et verticales; Si un seul paramètre est fourni, tel que l'échelle (1.1), cela signifie que les directions horizontales et verticales sont mises à l'échelle à 1,1 fois, résolvant parfaitement le besoin de changements de "taille" à l'échelle égale.
• Propriétaire de transition : utilisé pour définir l'effet d'animation des propriétés CSS passant en douceur d'une valeur à une autre. En définissant la transition dans le style de référence de l'élément, les modifications des attributs de transformation peuvent être présentées en animation lorsque: l'état actif est activé ou désinstallé.

Exercice pratique: construire un bouton clickable

Ci-dessous, nous utiliserons un exemple spécifique pour montrer comment implémenter un bouton qui sera temporairement élargi et restauré lors de la clic.

Structure HTML

Nous utilisons une div simple comme un conteneur de bouton qui contient des affichages de texte et de fraction à l'intérieur.

 

<adal>
    <title> Exemple de bouton Click-to-Zoom </title>
    <link rel="Stylesheet" href="clicker.css">
 head>

    <p id="title"> Test de clicker </p>
    <div id="bouton">
        <span id="text"> score: </span>
        <span id="score"> 0 </span>
    </div>
    <cript>
        LET COURT = 0;

        document.getElementById ('bouton'). onClick = () => {
            // Logique métier: mise à jour du score compteur = compteur 1;
            document.getElementById ('score'). InnerText = compteur;
        };
    </cript>

</adal>

Style CSS

Il s'agit d'un élément clé de la mise en œuvre de l'animation. Nous définirons le style de base, l'attribut de transition et la transformation: échelle () pour #Button.

 @import url ('https://fonts.googleapis.com/css2?family=monterrat&display=swap');

corps {
    Contexte: Linear-Gradient (à droite, # 11998E, # 38EF7D);
    Affichage: flex; / * Utilisez Flexbox pour centrer le contenu * /
    Flex-Direction: colonne;
    Align-Items: Centre;
    Justification-contenu: centre;
    Min-Height: 100VH; / * Assurez-vous que le corps occupe au moins la hauteur de la fenêtre * / /
    marge: 0;
}

#titre {
    Texte-aligne: Centre;
    Font-Family: «Montserrat», Sans-Serif;
    taille de police: 48px;
    Police-poids: Bold;
    utilisateur-sélection: aucun;
    Couleur: blanc; / * Assurez-vous que le titre est visible * /
    marge-fond: 20px;
}

#bouton {
    / * Style de base * /
    Largeur: 200px; / * Largeur fixe, pratique pour la démonstration de la transformation: échelle () effet * /
    hauteur: 80px; / * hauteur fixe * /
    rembourrage: 15px;
    Texte-aligne: Centre;
    Border: 3px blanc solide;
    Border-Radius: 50px;
    Font-Family: «Montserrat», Sans-Serif;
    taille de police: 32px;
    Police-poids: Bold;
    utilisateur-sélection: aucun;
    curseur: pointeur;
    Color en arrière-plan: transparent; / * arrière-arrière par défaut transparent * /
    Couleur: blanc; / * couleur texte * /

    / * Clé: définir les effets de transition de tous les attributs qui nécessitent l'animation * /
    / * transform, couleur arrière, couleur bordure, etc. * /
    Transition: transformer 0,15 s faciliter la facilité, couleur arrière 0,15 s facturation, couleur 0,15 s facilité de sortie;
}

/ * Effet de survol de la souris * /
#Button: Hover {
    Color d'arrière-plan: blanc;
    Couleur: # 11998E; / * La couleur du texte change lors de la volonté * /
    Color à la frontière: blanc;
}

/ * Clé: effet d'animation lors du clic (: statut actif) * /
#button: actif {
    transformée: échelle (1.1); / * 1.1x * /
    Color d'arrière-plan: blanc; / * Gardez la couleur d'arrière-plan cohérente * /
    Couleur: # 11998E; / * Garder la couleur du texte cohérente * /
    / * Remarque: la durée de transition ici écrasera la transition de la référence.
       Mais puisque nous voulons cliquer pour zoomer instantanément, puis le libérer et récupérer,
       Il n'est donc pas nécessaire de définir la durée de transition séparément ici.
       Le benchmark 0,15s suffit * /
}

Interaction javascript

JavaScript est principalement responsable de la logique métier dans ce scénario, telles que la mise à jour des scores. Les effets d'animation sont complètement contrôlés par CSS, ce qui rend le code séparé et plus facile à entretenir.

Dans le code HTML ci-dessus, nous avons lié la contre-logique de JavaScript à l'événement de clic du bouton. Lorsque le bouton est cliqué, l'événement OnClick sera licencié, le compteur augmentera et l'affichage du score sera mis à jour. Ce processus est parallèle et indépendant de l'animation CSS.

Concepts clés et meilleures pratiques

1. Explication détaillée de la transition CSS :
   • L'attribut de transition est la base de la mise en œuvre d'une animation en douceur. Il peut accepter plusieurs paramètres: transition-property (l'attribut CSS à la transition, tels que la transformation, la couleur arrière), la durée de transition (la durée de transition), la fonction de transition de transition (la courbe de vitesse de transition, telle que la facilité, linéaire), la transition (le retard avant le début de la transition).
   • Dans cet exemple, transition: transformer 0,15 s faciliter la facilité, couleur 0,15 s facilité de sortie, couleur 0,15 s facturation; Cela signifie que les attributs de transformée, de couleur arrière-plan et de couleur passeront tous une courbe de vitesse de facilité en moins de 0,15 seconde.
2. : Une pseudo-classe active interagit avec les utilisateurs :
   • : Active est l'un des commentaires les plus directs de l'état d'interaction utilisateur et est idéal pour réaliser une rétroaction visuelle instantanée lorsque le bouton clique.
   • En plus de: actif, il existe également des pseudo-classes telles que: Hover (souris Hover) ,: Focus (Gains Focus), qui peut être utilisé en combinaison pour créer des effets interactifs plus riches.
3. Transform: Scale () implémente la mise à l'échelle à l'échelle :
   • L'attribut de transformation est un outil puissant. En plus de Scale (), il existe également des fonctions telles que Translate () (Moving), Rotate () (Rotate), Skew () (Tilt) et d'autres fonctions, qui peuvent implémenter des transformations complexes bidimensionnelles ou tridimensionnelles.
   • L'utilisation de Transform: Scale () est plus efficace que de modifier directement la largeur et la hauteur, car elle ne déclenche pas la reflux des éléments, ne déclenchent que la repeint ou le composite, ce qui a moins d'impact sur les performances.
4. Considérations pour choisir CSS Animation et JS Animation :
   • Animation CSS : Convient pour des animations d'interface utilisateur simples et déclaratives, telles que les effets de commutation d'état et de transition. Il est généralement optimisé par le navigateur, avec de meilleures performances et un code plus propre.
   • Animation JavaScript : adapté aux animations complexes basées sur la logique, telles que les moteurs de physique, les animations de jeu, les animations qui nécessitent un contrôle précis de la chronologie ou sont étroitement intégrés aux données.
   • Pour les effets tels que les boutons de clic dans ce tutoriel, l'animation CSS est le premier choix.
5. Expérience utilisateur et optimisation des performances :
   • Durée de l'animation : Durée de l'animation de 0,1 seconde à 0,3 seconde peut généralement fournir une bonne rétroaction de l'utilisateur, ni trop brutal ni retardé l'utilisateur.
   • utilisateur-sélection: aucun; : Empêche les utilisateurs de sélectionner accidentellement du texte dans le bouton lorsque vous cliquez sur le bouton, en améliorant la maîtrise de l'interaction.
   • curseur: pointeur; : Indique explicitement qu'il s'agit d'un élément cliquable.

Résumer

Grâce à ce didacticiel, nous avons appris à utiliser CSS: actif pseudo-classe, transform: scale () attribut et transition attribut pour implémenter gracieusement l'animation de mise à l'échelle instantanée lorsque le bouton clique. Cette méthode résout non seulement le problème selon lequel JavaScript ne peut pas modifier directement les styles pour réaliser des animations, mais répond également à la nécessité de "changer la taille" par l'échelle à échelle égale et optimise les performances et l'expérience utilisateur. La séparation de la logique d'animation de la logique métier est un principe important pour la création d'applications Web maintenables et hautes performances.

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!