How can I animate a react.js component onclick and detect the end of the animation

Question

I want to have a react component flip over when a user clicks on the DOM element. I see some documentation about their animation mixin but it looks to be set up for \"enter\

Answer 1

Here is the answer using pure Reactjs events without any JQueries, other libs, registrations or sms :)

The key point is to provide animation keyframe name as a function parameter

CSS

.Modal {
    position: fixed;
    top: 30%;
    left: 25%;
    transition: all 0.3s ease-out;
}
.ModalOpen {
    animation: openModal 0.4s ease-out forwards;
}
.ModalClosed {
    animation: closeModal 0.4s ease-out forwards;
}

@keyframes openModal {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0);   }
}

@keyframes closeModal {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%);}
}

JS

const modal = ({ 
  isShown, isMounted, 
  initiateUnmountAction, unmountAction
}) => {
  const cssClasses = [
    "Modal",
    props.isShown ? "ModalOpen" : "ModalClosed"
  ];
  return (
    
      {isMounted && 
 
          {event.animationName == "closeModal" && unmountAction}
      }>
        
A Modal
        
          Dismiss
      
      
}
    

  );
};