如何使用Framer运动控制过渡动画的启动
如何使用Framer运动控制过渡动画的启动
提问于 2020-09-03 02:26:39
我正在尝试在一个父元素上设置display:none，一旦孩子们完成了错开的动画。我的li元素淡出，然后父ul应该更新为display:none
我可以在转换中设置延迟，但尝试访问什么时候属性。我试过：
const variants = {
open: {
display: 'block',
transition: {
staggerChildren: 0.17,
delayChildren: 0.2,
}
},
closed: {
display: 'none',
transition: {
staggerChildren: 0.05,
staggerDirection: -1,
display: {
when: "afterChildren" // delay: 1 - this will work
}
}
}
};显然，我的语法不正确，或者不能按我的意愿使用。
import * as React from "react";
import { render } from "react-dom";
import {motion, useCycle} from 'framer-motion';
const ulVariants = {
open: {
display: 'block',
visibility: 'visible',
transition: {
staggerChildren: 0.17,
delayChildren: 0.2,
}
},
closed: {
display: 'none',
transition: {
staggerChildren: 0.05,
staggerDirection: -1,
display: {
when: "afterChildren" // delay: 1 - will work
}
}
}
};
const liVariants = {
open: {
y: 0,
opacity: 1,
transition: {
y: {stiffness: 1000, velocity: -100}
}
},
closed: {
y: 50,
opacity: 0,
transition: {
y: {stiffness: 1000}
}
}
}
const Item = (props) => (
<motion.li
variants={liVariants}
>
{props.name}
</motion.li>
)
const App = () => {
const [isOpen, toggleOpen] = useCycle(false, true);
return (
<>
<button onClick={toggleOpen}>Toggle Animation</button>
<motion.ul
variants={ulVariants}
animate={isOpen ? 'open': 'closed'}
>
{Array.from(['vader', 'maul', 'ren']).map((item, index) => (
<Item key={item} {...{name: item}} />
))}
</motion.ul>
</>
);
};
render(<App />, document.getElementById("root"));回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-03 19:49:53
when应该是transition对象的属性，而不是display。
这似乎很有效(除非我误解了你想要做的事情)：
closed: {
display: 'none',
transition: {
staggerChildren: 0.05,
staggerDirection: -1,
when: "afterChildren"
}
}Stack Overflow用户
发布于 2022-09-20 19:59:53
您可以使用
<motion.div
animate={{
transitionEnd: {
display: "none",
},
}}
/>当动画到一个非动画的值，如“块”，这个值将立即设置。通过在transitionEnd中设置此值，该值将在动画结束时设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63715925
复制相关文章
相似问题
腾讯云开发者
