当上部元素从 DOM 中删除时，如何在取景器运动中平滑地制作元素下方位置的动画

Question

问题

当App组件被渲染或重新渲染时，Layout道具会为粉红色div的位置变化设置动画，但当元素从DOM中移除时，它不会导致App重新渲染，因此当紫色div从DOM中删除时，粉红色div会捕捉到顶部，而不是设置动画。

当从DOM中移除紫色div时，如何设置粉红色div的动画？

点击切换按钮删除紫色潜水

代码SandBox--https://codesandbox.io/s/amazing-shirley-6e3oqi?file=/src/App.js

Answer 1

在执行并完成动画之前，不能卸载元素。您可以使用模块中提供的挂钩useAnimationControls，并对动画进行更多控制。

import { motion, useAnimationControls } from "framer-motion";
export default function App() {
const controls = useAnimationControls()
const controlsTwo = useAnimationControls()

const animOne = async() => await controls.start({
scale: 0,
transition:{
ease: "easeInOut",
duration: 1,
}
})
const animTwo = async() => await controlsTwo.start({
y: -232,
transition:{
ease: "easeInOut",
duration: 1,
}
})

const toggle = () => {
animOne()

setTimeout(() => {
animTwo()
}, 300)
}


return (
<div className="App">
<button onClick={() => toggle()}>Toggle</button>
<motion.div
className="purple-div"
initial={{ y: 10 }}
animate={controls}
>
Press toggle btn & Look at Lower Div
</motion.div>
<motion.div
layout
className="pink-div"
initial={{ y: -100 }}
animate={controlsTwo}
>
Look At Me
</motion.div>
</div>
);
}