Animation de glissement modal réactif

Question

J'ai implémenté un modal dans React et CSS et actuellement, lorsque je l'ouvre, j'ai implémenté une animation coulissante vers le haut où le modal glisse vers le haut depuis le bas mais quand je le ferme, je veux qu'il glisse vers le bas, je ne peux pas Découvrez comment créer avec précision l'animation de glissement vers le bas, quelqu'un peut-il m'aider ? Code=>

importer "./styles.css";
importer réagir, { useState } depuis "réagir" ;

exporter la fonction par défaut App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  retour (
    

       setIsModalOpen(true)}>ouvrir 
      {isModalOpen &&
        

          

            

              
              
Fournir des commentaires supplémentaires
            
             setIsModalOpen(false)}> fermer 
          
        
      )}
    
  );
}
code css=>
.modal-overlay {
  poste : fixe ;
  haut : 0 ;
  gauche : 0 ;
  à droite : 0 ;
  bas : 0 ;
  couleur d'arrière-plan : rgba(0, 0, 0, 0,5) ;
  affichage : flexible ;
  align-items : centre ;
  justifier-contenu : centre ;
  indice z : 9999 ;
  transition : opacité 0,3s facilité ;
}

* {
  largeur maximale : 100 % ;
}

.modal-contenu {
  arrière-plan : #f5f0f0 ;
  remplissage : 20 px ;
  rayon de bordure : 4 px ;
  box-shadow : 0 2px 10px rgba(0, 0, 0, 0.15);
  indice z : 999 ;
  transformer : traduireY(100 %);
  animation : glissement vers l'avant de 0,3 s ;
  largeur : 59rem ;
  rayon de bordure : 8 px ;
  marge gauche : auto ;
  marge droite : auto ;
  box-shadow : 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  hauteur : 21rem ;
  position : relative ;
  à gauche : 2rem ;
}

@keyframes coulissant {
  depuis {
    transformer : traduireY(100 %);
  }

  à {
    transformer : traduireY(0);
  }
}

.bouton de fermeture {
  position : absolue ;
  haut : 10px ;
  à droite : 10px ;
  bordure : aucune ;
  fond : transparent ;
  taille de police : 24 px ;
  curseur : pointeur ;
}

.fournir une réponse {
  taille de police : 20 px ;
}

.feedbackModalHeader {
  affichage : flexible ;
  align-items : centre ;
  écart : 1,2rem ;
  marge supérieure : 0,8 rem ;
}
Lien Code Sandbox =>
https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css
            

Answer 1

Vous devez changer la classe du mode en fonction du status. (Nom de classe conditionnel)

Voici un moyen simple de créer des modèles avec le contenu que vous souhaitez :

Tout d'abord, définissez l'animation CSS :

.modal-slide-down {
  animation-name: slide-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

Ensuite, dans votre composant React, ajoutez une variable d'état pour savoir si le modal doit être activé ou désactivé :

const [isOpen, setIsOpen] = useState(false);

Lorsque l'utilisateur clique sur un bouton ou effectue une autre action pour ouvrir le modal, définissez l'état isOpen sur true :

<button onClick={() => setIsOpen(true)}>Open Modal</button>

Enfin, appliquez conditionnellement une classe CSS au mode basé sur l'état isOpen :

<div className={`modal ${isOpen ? 'modal-slide-down' : ''}`}>
  {/* Modal content goes here */}
</div>

Plus d'explications :

Lorsque la classe isOpen状态为true时，模态组件中会添加modal-slide-down类，从而触发向下滑动动画。当 isOpen 状态为 false 时，modal-slide-down sera supprimée, l'animation coulissante sera déclenchée.

Avec ces changements, le modal glissera vers le bas lorsqu'il sera ouvert et remontera lorsqu'il sera fermé. Bien entendu, vous devrez peut-être ajuster la durée de l'animation et d'autres propriétés CSS en fonction de votre cas d'utilisation spécifique.

J'espère avoir pu résoudre votre problème.