将元素平滑缩放到无然后恢复到原始大小的正确方法是什么答案

【问题标题】：What is the proper way to smoothly scale an element to nothing and then back to its original size将元素平滑缩放到无然后恢复到原始大小的正确方法是什么
【发布时间】：2021-12-11 10:27:31
【问题描述】：

这就是我在 React 中的做法：

  const animate_boxes = () => {
    inner_ref.current.style.transform = "scale(0)";
    setTimeout(() => {
      if (inner_ref && inner_ref.current) {
        inner_ref.current.style.transform = "scale(1)";
      }
    }, 200);
  };

由于某种原因，它不可靠。 setTimeout 可能并不总是运行。还没弄清楚为什么。但是如果有其他方法可以做到这一点，那么请写一个解决方案。

谢谢

【问题讨论】：

你愿意使用 react 库而不是手动尝试动画吗？

标签： javascript html css reactjs frontend

【解决方案1】：

我可以推荐 react-spring 库吗？

【讨论】：

【解决方案2】：

使用带有scale 属性的成帧运动库作为值数组传入例如：

import {motion} from 'framer-motion'


const Component = () => {
   return (
     <motion.div
         initial={{scale: 1}}
         animate={{scale: [0.1, 1]}}
     >
         hi
     </motion.div>

   )

}

更多示例请参阅此文档 - Docs

【讨论】：