Implémentez l'effet d'animation du zoom dynamique lors de la cliqueté sur les boutons Web

Cet article vise à enseigner comment réaliser l'animation de zoom dynamique lorsque le bouton clique sur une page Web, plutôt qu'un simple changement instantané de largeur ou de hauteur. Nous nous concentrerons sur la façon d'utiliser l'attribut de pseudo et de transformation: Scale () de CSS, de combiner la transition en douceur, de créer une expérience interactive conviviale et d'éviter le problème de perte d'animation causé par le style de fonctionnement direct de JavaScript.

1. Comprendre le cœur du problème: les changements manquants et la taille de l'animation

Dans le développement Web, nous devons souvent ajouter des commentaires visuels aux éléments interactifs tels que les boutons, où les animations zoom lors du clic sont une exigence commune. Cependant, un problème commun pour les débutants est que la modification directe de l'attribut de largeur ou de hauteur d'un élément via JavaScript, il est souvent impossible de voir l'effet d'animation attendu. Cela est principalement dû au fait que les modifications de style de JavaScript prennent effet instantanément, et le navigateur n'a pas assez de temps pour rendre l'état de transition intermédiaire. Par exemple, si vous définissez continuellement la largeur de A à B à B, le navigateur affichera uniquement l'état C final.

En outre, les utilisateurs s'attendent généralement à une mise à l'échelle égale de la «taille» globale du bouton, pas seulement un changement de «largeur», ce qui nous oblige à utiliser les propriétés CSS plus appropriées à réaliser.

2. Solution: CSS: pseudo-classe active et transformée: échelle ()

Pour obtenir une animation à l'échelle en douceur lorsque le bouton clique, la meilleure pratique consiste à utiliser l'attribut Pseudo Classe et Transform: Scale () de CSS et combinez l'attribut de transition pour contrôler la vitesse d'animation.

• : Pseudo-classe active : cette pseudo-classe applique des styles lorsque l'utilisateur active un élément (par exemple, la souris appuye sur le bouton et ne la place pas). Lorsque l'utilisateur libère la souris, le style reviendra automatiquement à l'état inactif. Cela nous donne un état naturel "appuyez" et "relevant", qui est parfait pour déclencher des animations de clic.
• Transform: SCALE () : Cet attribut CSS nous permet d'étendre les éléments en deux dimensions sans affecter la disposition du flux de documents des éléments. Il peut atteindre l'élargissement ou la réduction proportionnelle égale de la taille globale du bouton, répondant parfaitement aux besoins de la "taille de changement".
• Propriété de transition : utilisée pour définir l'heure et la manière qu'il faut pour qu'une propriété CSS passe en douceur d'une valeur à une autre. Appliquez-le à la propriété Transformer du bouton pour obtenir une animation de zoom en douceur lorsque vous cliquez sur.

3. Étapes d'implémentation et exemples de code

Nous allons montrer comment y parvenir en fonction d'un simple projet de compteur de clics.

3.1 Structure HTML

La structure HTML est maintenue simple, avec un div servant de bouton qui contient du texte et des fractions affichées à l'intérieur.

 

    <adal>
        <title> Bouton cliquez sur Tutoriel d'animation 
        <link rel="Stylesheet" href="clicker.css">
     head>
    </title>
        <p id="title"> Cliquez sur Counter </p>
        <div id="bouton">
            <span id="text"> score: </span>
            <span id="score"> 0 </span>
        </div>
        <script src="clicker.js"> </ script>
    
</script></adal>

3.2 Style CSS

Il s'agit d'un élément clé de la mise en œuvre de l'animation. Nous définirons le style de style initial, de survole (souris over) et un style actif (cliquez sur l'activation) pour le bouton.

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

corps {
    Contexte: Linear-Gradient (à droite, # 11998E, # 38EF7D);
    Affichage: flex; / * Utilisez la mise en page Flex 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; / * Couleur de titre * /
    marge-fond: 30px; / * Augmentez le titre et l'espacement des bouton * /
}

#bouton {
    Largeur: 250px; / * Largeur fixe, pratique pour la transformation de la démonstration * /
    hauteur: 100px; / * 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;
    Couleur: blanc; / * Couleur du texte du bouton * /
    Color en arrière-plan: transparent; / * fond initial transparent * /
    curseur: pointeur; / * Afficher le pointeur à main lors du volant * /

    / * Clé: ajouter l'effet de transition, appliqué à tous les attributs transitables, durant 0,15 seconde * /
    Transition: toutes les 0,15 s facilitant la facilité;
}

#Button: Hover {
    Color en arrière-plan: RGBA (255, 255, 255, 0,2); / * L'arrière-plan devient plus léger lorsqu'il oscille * /
    / * Vous pouvez ajouter un léger effet de zoom pour améliorer l'expérience utilisateur * /
    transformée: échelle (1.02);
}

#button: actif {
    / * Clé: zoomez le bouton en cas de clic * /
    transformée: échelle (0,95); / * Rétrécir à 95% * /
    Color d'arrière-plan: blanc; / * L'arrière-plan devient blanc lorsque vous cliquez sur * /
    Couleur: # 11998E; / * Couleur de texte en cas de clic * /
    Color à la frontière: # 11998E; / * Couleur de bordure en cas de clic * /
    / * Remarque: la transition a été définie dans #Button, pas besoin de le définir à plusieurs reprises ici * /
}

#texte {
    marge-droite: 10px;
}

Points clés CSS:

1. # Button's Transition Proprite : Transition: Tous les 0,15S Emplong Out-Out; Cette ligne est cruciale. Il indique au navigateur que lorsque des propriétés transitables de #Button (comme la transformation, la couleur d'arrière-plan, la couleur, la bordure de la bordure, etc.) changent, la transition doit être lissée en 0,15 seconde.
2. #BUTTON: Transformée active: échelle (0,95); : Lorsque le bouton est cliqué, la propriété de transformation passera en douceur de l'échelle par défaut (1) (c'est-à-dire non mise à l'échelle) à l'échelle (0,95), en réalisant l'effet de réduction des bouton. Lorsque la souris est libérée, elle lisse à l'échelle (1).
3. #Button: Hover : Pour une meilleure expérience utilisateur, nous avons également ajouté des styles lors de la volonté, y compris de légers changements de fond et des effets de zoom.

3.3 Logique JavaScript

JavaScript doit désormais se concentrer uniquement sur la logique métier, c'est-à-dire la mise à jour du compteur de clics sans interférer avec l'effet d'animation du bouton.

 // clicker.js
document.addeventListener ('DomContentloaded', () => {
    LET COURT = 0;
    const Button = document.getElementById ('bouton');
    const scoredisplay = document.getElementById ('score');

    if (bouton && scoredisplay) {
        Button.OnClick = () => {
            compteur = compteur 1;
            scoredisplay.innerText = compter;
            // L'effet d'animation est traité par CSS, JS ne nécessite pas d'intervention};
    } autre {
        Console.Error ("Bouton ou élément d'affichage de fraction introuvable.");
    }
});

Points clés JavaScript:

1. DomContentloaded : assurez-vous d'exécuter le script une fois le DOM entièrement chargé pour éviter les éléments manquants.
2. Écoute de l'événement : liez Cliquez sur Button Event via Button.Onclick.
3. Logique métier : dans l'événement Click, il est seulement responsable de la mise à jour de la valeur de comptoir. L'animation visuelle du bouton est complètement contrôlée par CSS.

4. Précautions et meilleures pratiques

• Focus séparé : laisser l'animation et le contrôle du style à CSS et la logique métier à JavaScript, qui est la meilleure pratique pour le développement frontal. De cette façon, le code est plus facile à entretenir et à comprendre.
• La mise à l'échelle avec Transform : Transform: Scale () est la méthode préférée pour atteindre la mise à l'échelle de la taille des éléments, car elle obtient généralement de meilleures performances et n'affecte pas la disposition des autres éléments dans le flux de documents. La modification de la largeur et de la hauteur peut provoquer le reflux de la page et affecter les performances.
• La valeur de transition -durée doit être modérée, 0,1 seconde à 0,3 seconde peut généralement fournir une bonne expérience utilisateur. L'animation trop courte peut ne pas être clairement visible, et l'animation trop longue peut rendre les utilisateurs ennuyeux.
• Compatibilité : la transition et la transition sont bien prises en charge dans les navigateurs modernes. Pour les navigateurs plus âgés, envisagez d'ajouter un préfixe de navigateur (comme -webkit-), mais il n'est généralement plus nécessaire maintenant.
• Expérience utilisateur : En plus de cliquer sur l'animation, envisagez d'ajouter du curseur: pointeur; Pour inviter l'utilisateur qu'il s'agit d'un élément cliquable, et de l'utilisateur-sélection: aucun; Pour éviter que le texte à l'intérieur du bouton ne soit sélectionné accidentellement lors du clic.

5. Résumé

Grâce à ce didacticiel, nous avons appris à utiliser CSS: Attribut Pseudo-Classe, Transform: Scale () et attribut pour créer des animations de clics à l'échelle lisse et dynamiques pour les boutons Web. Cette méthode résout non seulement le problème des animations manquantes causées par le fonctionnement direct des styles par JavaScript, mais suit également le principe de séparation des styles et des comportements dans le développement frontal, ce qui rend le code plus robuste, efficace et facile à entretenir. La maîtrise de ces conseils vous aidera à créer une interface utilisateur plus interactive et engageante.

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!