J'essaie de créer une animation à chaque fois que je clique sur un bouton. Cela fonctionne bien sur un ordinateur, mais je ne parviens pas à obtenir le même effet sur un mobile. Je dois d'abord cliquer sur le bouton, puis cliquer ailleurs pour défocaliser le CSS, puis cliquer à nouveau sur le bouton pour obtenir l'effet d'animation.
Ce qui suit est un extrait de code.
.btn_container { couleur : #35f8ff ; position : relative ; affichage : bloc en ligne ; alignement du texte : centre ; marge : 2,5 rem auto ; } .prog_btn { transformation de texte : majuscule ; taille de police : 1,3rem ; remplissage : 10px 25px ; indice z : 3 ; couleur d'arrière-plan : transparent ; curseur : pointeur ; transition : 0,2 s de relâchement ; position : relative ; marge : auto ; } .btn_container .svgStroke { position : absolue ; indice z : 1 ; largeur : 100 % ; haut : -25 % ; gauche : 0 ; } .btn_container .svgStroke chemin { coup-dasharray : 100 ; décalage de trait : -800 ; largeur de trait : 2 ; transition : tous les 1 sont faciles à entrer et à sortir ; trait : #35f8ff ; } @keyframes tiret { 0% { coup-dasharray : 100 ; largeur de trait : 2 ; } 50 % { largeur de trait : 4 ; trait : #35f8ff ; filtre : ombre portée (0px 0px 3px #e8615a) ombre portée (0px 0px 20px #35f8ff) ombre portée (0px 0px 150px #35f8ff); } 100 % { décalage de trait : 800 ; largeur de trait : 2 ; } } .prog_btn:hover+.svgStroke chemin { curseur : pointeur ; animation : tiret 1,5 s cube-bézier (0,25, 0,46, 0,45, 0,94) ; } .prog_btn: survol { taille de police : 1,2rem ; } .ajouter { affichage : bloc en ligne ; marge droite : 0,75rem ; hauteur : 1,5rem ; largeur : 1,5 rem ; } Ajouter 10 %
Il existe également un lien CodePen ici.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'espérais pouvoir annuler la mise au point (c'est-à-dire le flou) à la fin de l'animation, mais cela n'a pas fonctionné.
Voici une solution de contournement légèrement maladroite : cet extrait supprime l'animation lorsqu'elle se termine et la réanime lorsqu'il y a un autre événement touchstart. Il utilise des paramètres de style au lieu de classes.
let touchDevice = false; const progBtn = document.querySelector('.prog_btn'); const path = document.querySelector('.prog_btn +.svgStroke path'); path.addEventListener('animationend', function() { path.style.animation = ''; }); progBtn.addEventListener('touchstart', function() { touchDevice = true; path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; }); progBtn.addEventListener('mouseover', function() { path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; });.btn_container { color: #35f8ff; position: relative; display: inline-block; text-align: center; margin: 2.5rem auto; } .prog_btn { text-transform: uppercase; font-size: 1.3rem; padding: 10px 25px; z-index: 3; background-color: transparent; cursor: pointer; transition: 0.2s ease-out; position: relative; margin: auto; } .btn_container .svgStroke { position: absolute; z-index: 1; width: 100%; top: -25%; left: 0; } .btn_container .svgStroke path { stroke-dasharray: 100; stroke-dashoffset: -800; stroke-width: 2; transition: all 1s ease-in-out; stroke: #35f8ff; } @keyframes dash { 0% { stroke-dasharray: 100; stroke-width: 2; } 50% { stroke-width: 4; stroke: #35f8ff; filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff); } 100% { stroke-dashoffset: 800; stroke-width: 2; } } .prog_btn:hover+.svgStroke path { cursor: pointer; } .prog_btn:hover { font-size: 1.2rem; } .add { display: inline-block; margin-right: 0.75rem; height: 1.5rem; width: 1.5rem; }