为什么我的对话框元素在打开时没有动画？

Question

我有一个

<motion.dialog>

元素，我正在尝试为其设置动画，但它不起作用。

这就是元素

<motion.dialog onClick={closeModal} className={className}
            initial={{insetBlockStart:"500px"}}
            animate={{insetBlockStart:"0px"}}
>

当我点击打开按钮时

const eventModalHandle=()=>{
     setEventModal(true);
     document.querySelector(`.event-modal`).showModal();
}

这是模式应该打开的方式，但动画不起作用。我不想用 div 来做。

这是打开后的浏览器结果，但它不是动画：

<dialog class="event-modal" style="transform: translateY(0%) translateZ(0px); inset-block-start: 0px;">test modal</dialog>

Answer 1

这就是我在 React 中使用 Framer Motion 设置输入动画的方式：

const [togglereactionList, settogglereactionList] = useState(false);
const SocialDialog = useRef<HTMLDialogElement>(null);

useEffect(() => {
togglereactionList
  ? SocialDialog.current?.showModal()
  : SocialDialog.current?.close();
  }, [togglereactionList]);

JSX

<AnimatePresence mode="wait">
    {togglereactionList && (
    <motion.dialog
    initial={{ opacity: 0, y: 300 }}
    transition={{ duration: 1 }}
    animate={{
        opacity: togglereactionList ? 1 : 0,
        y: togglereactionList ? 0 : 300,
    }}
    ref={SocialDialog}
    onClose={(e) => {
          settogglereactionList((prev) => !prev);              
    }}
</motion.dialog>
)}
  </AnimatePresence>