How to animate child elements of AnimatePresence in Framer Motion?

[Rahul3229]

Hi, I have two motion.div elements inside of my AnimatePresence component from framer motion. I am using conditional rendering to have an element pop up from bottom of the screen and then leave the screen by going up. All of this is achieved by two motion.div elements and this is triggered with a click of a button. But for some reason the second motion.div , which makes my pop up leave the screen, does not work. It only works if click my button again. I am new to React and to framer motion, can some one please help me, I've been stuck on this for days!. Here's my code-
`
import './App.css';

import Home from './Home.js';

import Results from './Results.js';

import Login from './Login.js';

import Explore from './Explore.js';

import { BrowserRouter,Routes,Route, NavLink } from 'react-router-dom';

import { AnimatePresence,motion } from 'framer-motion';

import NavBar from './NavBar.js';

import {useLocation} from "react-router-dom";

import {useState} from 'react';

export default function App() {
const [show, setShow] = useState(true);

return (
<>
<button type="button" onClick={() => setShow(!show)} >
Show / Unshow


{
show &&
<>
<motion.div
className='slide-in'
initial={{scaleY:0}}
animate={{scaleY:0}}
exit={{scaleY:1}}
transition={{duration:1,ease:[0.22,1,0.36,1]}}
key="here"
>

      </motion.div>



      <motion.div 
      className='slide-out'
      initial={{scaleY:1}}
      animate={{scaleY:0}}
      exit={{scaleY:0}}
      transition={{duration:1,ease:[0.22,1,0.36,1]}}
      key="wat"
      >
        
      </motion.div>
      </>
     }
  </AnimatePresence>
</>

);
}

`

My CSS-

`.slide-in
{
position: fixed;
top:0;
left:0;
width:100%;
height:60vh;
background-color: black;
transform-origin:bottom;
}

.slide-out
{
position:fixed;
top:0;
left:0;
width:100%;
height:60vh;
background-color: black;
transform-origin: top;
}`

Hope this video helps-

react.-.Trim.mp4