在我的react应用程序中,我想在页面加载时显示一个具有淡入效果的按钮。我使用了framer-motion,但是我不能使动画工作。
import React, { Component } from 'react';
import { motion, AnimatePresence } from "framer-motion"
<AnimatePresence>
<Button component={motion.div}
initial={{ opacity: 0 }}
animate={{ opacity: 1, duration:1000 }}
type="submit"
variant="outlined" size="medium">
Continue
</Button>
</AnimatePresence>
我错过了什么?
1条答案
按热度按时间xzabzqsa1#
你试过把持续时间放在你按钮的过渡 prop 里吗?
不要忘记持续时间是以秒为单位的。
而且,对于您编写的代码,AnimatePresence不执行任何操作,因为它用于将从dom中删除的组件。