5180 fichiers 38.5 Mo 0 téléchargements 225 vues mis à jour il y a 5 heures ui
nitro-v36-with-renderer-v36 / src / common / transitions / TransitionAnimationStyles.ts
TransitionAnimationStyles.ts 2.2 Ko Télécharger le fichier
import { Variants } from 'framer-motion';
import { TransitionAnimationTypes } from './TransitionAnimationTypes';

export function getTransitionVariants(type: string): Variants {
    switch (type) {
        case TransitionAnimationTypes.BOUNCE:
            return {
                hidden: { opacity: 0, scale: 0.3 },
                visible: { opacity: 1, scale: 1, transition: { type: 'spring', stiffness: 260, damping: 12 } },
                exit: { opacity: 0, scale: 0.3 }
            };
        case TransitionAnimationTypes.SLIDE_LEFT:
            return {
                hidden: { opacity: 0, x: '-100%' },
                visible: { opacity: 1, x: 0 },
                exit: { opacity: 0, x: '-100%' }
            };
        case TransitionAnimationTypes.SLIDE_RIGHT:
            return {
                hidden: { opacity: 0, x: '100%' },
                visible: { opacity: 1, x: 0 },
                exit: { opacity: 0, x: '100%' }
            };
        case TransitionAnimationTypes.FLIP_X:
            return {
                hidden: { opacity: 0, rotateX: 90 },
                visible: { opacity: 1, rotateX: 0 },
                exit: { opacity: 0, rotateX: 90 }
            };
        case TransitionAnimationTypes.FADE_UP:
            return {
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0 },
                exit: { opacity: 0, y: 20 }
            };
        case TransitionAnimationTypes.FADE_IN:
            return {
                hidden: { opacity: 0 },
                visible: { opacity: 1 },
                exit: { opacity: 0 }
            };
        case TransitionAnimationTypes.FADE_DOWN:
            return {
                hidden: { opacity: 0, y: -20 },
                visible: { opacity: 1, y: 0 },
                exit: { opacity: 0, y: -20 }
            };
        case TransitionAnimationTypes.HEAD_SHAKE:
            return {
                hidden: { x: 0 },
                visible: {
                    x: [0, -6, 5, -3, 2, 0],
                    transition: { duration: 0.5 }
                },
                exit: { x: 0 }
            };
    }

    return {
        hidden: {},
        visible: {},
        exit: {}
    };
}
15Sujets
1Dépôts
20Membres
2En ligne
Profile
Inscrit
Dernière visite
Messages
0
Votes positifs
0
Votes négatifs
0

Nous utilisons des cookies pour assurer le bon fonctionnement du site et améliorer votre expérience. en savoir plus

Autoriser