Animations de pages

SmartCommon utilise Framer Motion pour animer les transitions entre pages. Les animations sont configurables par route.

Dans la configuration du Provider :

const config = {
  pages: {
    "*": "fade" // Animation par défaut pour toutes les pages
  }
};

Vous pouvez définir des animations différentes selon la route d'origine et de destination :

const config = {
  pages: {
    // Depuis la page d'accueil
    "/": {
      "/dashboard": "slideLeft",  // Vers dashboard: glisse à gauche
      "/settings": "slideLeft",   // Vers settings: glisse à gauche
      "*": "fade"                 // Vers autres: fondu
    },

    // Depuis le dashboard
    "/dashboard": {
      "/": "slideRight",          // Retour accueil: glisse à droite
      "/details": "slideLeft",    // Vers détails: glisse à gauche
      "*": "fade"
    },

    // Depuis les paramètres
    "/settings": {
      "/": "slideRight",
      "*": "fade"
    },

    // Pour toutes les autres pages
    "*": "fade"
  }
};

L'animation est choisie selon ce schéma :

1. Cherche une config pour la page actuelle
2. Si trouvée, cherche une animation pour la page précédente
3. Si pas trouvée, utilise '' de la page actuelle 4. Si pas de config pour la page actuelle, utilise * global ### Exemple Navigation de /dashboard vers / : pages: { "/": { "/dashboard": "slideRight", // <- Cette animation sera utilisée "*": "fade" }, "/dashboard": { "/": "slideRight", "*": "fade" } } La page / s'affiche avec slideRight car on vient de /dashboard. ## Désactiver les animations sur desktop Par défaut, les animations de glissement sont remplacées par fade sur desktop pour une meilleure UX : // Dans le composant Page (comportement interne) if (device?.type === "desktop") { return "fade"; } ## Utiliser le composant Page Le composant Page gère automatiquement les animations : import { Page, Block } from '@cap-rel/smartcommon'; import { useLocation } from 'react-router-dom'; const Dashboard = () => { const location = useLocation(); return ( <Page location={location}> <Block> Contenu du dashboard </Block> </Page> ); }; <note important>Le prop location est requis pour que les animations fonctionnent correctement.</note> ## Personnaliser les animations Vous pouvez créer des animations personnalisées en modifiant les variants Framer Motion : // Animations par défaut dans SmartCommon const animations = { slideRight: { initial: { x: "50%", opacity: 0 }, animate: { x: 0, opacity: 1, transition: { duration: 0.15, ease: "easeInOut" } }, exit: { x: "50%", opacity: 0, transition: { duration: 0.15, ease: "easeInOut" } } }, slideLeft: { initial: { x: "-50%", opacity: 0 }, animate: { x: 0, opacity: 1, transition: { duration: 0.15, ease: "easeInOut" } }, exit: { x: "-50%", opacity: 0, transition: { duration: 0.15, ease: "easeInOut" } } }, fade: { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.15, ease: "easeOut" } }, exit: { opacity: 0, transition: { duration: 0.15, ease: "easeOut" } } }, zoom: { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" } } }; ## Hook useAnimation Pour des animations personnalisées dans vos composants : import { useAnimation } from '@cap-rel/smartcommon'; const MyComponent = () => { const { start, animations, setAnimations } = useAnimation({ fadeIn: { value: false, state: null }, slideIn: { value: false, state: null } }); useEffect(() => { if (start) { // Déclencher l'animation après le premier rendu setAnimations(prev => ({ ...prev, fadeIn: { ...prev.fadeIn, state: 'visible' } })); } }, [start]); return ( <motion.div initial={{ opacity: 0 }} animate={animations.fadeIn.value ? { opacity: 1 } : {}} > Contenu animé </motion.div> ); }; ## Animations avec Framer Motion Pour des animations plus complexes, utilisez directement Framer Motion : import { motion, AnimatePresence } from 'framer-motion'; const MyList = ({ items }) => ( <AnimatePresence> {items.map(item => ( <motion.div key={item.id} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.2 }} > {item.name} </motion.div> ))} </AnimatePresence> ); ## Exemples de configurations ### Application mobile classique Navigation hiérarchique (liste → détail → sous-détail) : pages: { "/": { "*": "slideLeft" }, "/items": { "/": "slideRight", "/items/*": "slideLeft", "*": "fade" }, "/items/*": { "/items": "slideRight", "*": "fade" }, "*": "fade" } ### Application avec onglets Navigation entre onglets sans animation de glissement : pages: { "/home": { "*": "fade" }, "/search": { "*": "fade" }, "/profile": { "*": "fade" }, "/settings": { "*": "slideLeft" // Seul settings a une animation différente }, "*": "fade" } ### Désactiver toutes les animations pages: { "*": "fade" // Utiliser uniquement fade (le plus discret) } // Ou modifier la durée à 0 // (nécessite de modifier les animations dans le code) ## Voir aussi * Configuration - Configuration du Provider * SmartCommon - Composant Page * Framer Motion - Documentation officielle