L'animation ne se lance pas – ZenBlocks buttonBasic
Conclusion
Dans la plupart des cas, l’animation ne se déclenche pas à cause de l’un des points suivants: **élément requis non configuré, mauvais type d’animation, ou test effectué uniquement dans l’éditeur**. Commencez par identifier le type d’animation concerné.
—
Causes
buttonBasic propose 4 types d’animation, chacun avec des conditions de déclenchement différentes.
| Type d’animation | Déclenchement | Condition préalable |
|—|—|—|
| Animation de texte | Au survol uniquement | Un texte doit être saisi |
| Animation d’icône | Au survol uniquement | Une icône doit être définie |
| Animation de cadre | Lecture continue | Un cadre d’icône doit être activé |
| Animation du bouton | Lecture continue | Aucune |Causes fréquentes:
1. **Élément requis manquant**: l’animation d’icône ne fonctionne pas sans icône, et l’animation de cadre ne fonctionne pas sans cadre d’icône.
2. **Vérification faite dans l’éditeur**: les animations au survol doivent être testées sur la page front-end.
3. **Préréglage sur `none`**: aucun effet ne se lance tant que le preset reste sur `none`.—
Procédure
### Étape 1: vérifier le type d’animation
1. Identifiez l’animation configurée (texte / icône / cadre / bouton).
2. Ouvrez le panneau de réglage correspondant.
3. Vérifiez que le preset n’est pas `none`.### Étape 2: vérifier les éléments prérequis
– **Animation de texte**: vérifiez que le texte principal est bien renseigné.
– **Animation d’icône**: vérifiez qu’une icône est sélectionnée dans les réglages d’icône.
– **Animation de cadre**: vérifiez que le cadre d’icône est activé.
– **Animation du bouton**: pas de prérequis spécifique.### Étape 3: vérifier sur le front-end
1. Ouvrez la page réelle côté front-end (pas seulement l’aperçu éditeur).
2. Pour les effets au survol (texte / icône), testez avec la souris.
3. Pour les effets continus (cadre / bouton), vérifiez qu’ils démarrent dès le chargement de la page.### Étape 4: vérifier les transitions
1. Ouvrez le panneau de transition de l’animation concernée.
2. Vérifiez que `Duration` n’est pas trop courte.
3. Vérifiez que `Delay` n’est pas trop long.—
Points d’attention
– **Limite de 30 caractères pour l’animation de texte**: le décalage caractère par caractère s’applique jusqu’à 30 caractères. À partir du 31e, le mouvement est groupé.
– **`overflow` sur l’animation de cadre**: les presets `neon-01` et `glow-01` utilisent `box-shadow`; `overflow: visible` peut être appliqué au cadre et l’effet peut dépasser la zone du bouton.
– **Contrôle exclusif de l’animation d’icône**: quand l’animation d’icône est active, l’affichage/masquage de l’icône est piloté par ce module.—
Paramètres liés
– [Paramètres d’animation de texte](../15-text-animation-settings.md) – Effets de texte au survol
– [Paramètres d’animation d’icône](../16-icon-animation-settings.md) – Effets d’icône au survol
– [Paramètres d’animation de cadre](../17-frame-animation-settings.md) – Effets continus du cadre
– [Paramètres d’animation du bouton](../18-button-animation-settings.md) – Effets de survol globaux
– [Paramètres d’icône](../07-icon-settings.md) – Réglages icône et cadre