我正在将Framer Motion用作React项目中的动画库。我正在尝试使用when属性在子元素之后设置父元素的动画。它不起作用,因为ContentVariants
和ImgVariants
正在同时运行。
import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { motion } from "framer-motion";
export const ContentVariants = {
expanded: () => ({
width: "150px",
transition: {
when: "afterChildren",
duration: 2
}
}),
collapsed: () => ({
width: "50px",
transition: {
when: "afterChildren",
duration: 2
}
})
};
export const Content = styled(motion.div)`
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: burlywood;
padding: 30px;
height: 500px;
`;
export const ToggleBtn = styled.button`
padding: 5px 10px;
cursor: pointer;
display: flex;
width: auto;
align-self: flex-end;
`;
export const ImgVariants = {
expanded: {
width: "100px",
scale: 1,
transition: {
duration: 2
}
},
collapsed: {
scale: 0.5,
transition: {
duration: 2
}
}
};
const Img = styled(motion.img)``;
class App extends Component {
state = {
collapsed: false
};
toggle = () => {
this.setState({ collapsed: !this.state.collapsed });
};
render() {
const { collapsed } = this.state;
return (
<div>
<Content
initial={collapsed ? "collapsed" : "expanded"}
animate={collapsed ? "collapsed" : "expanded"}
variants={ContentVariants}
>
<Img
src="https://picsum.photos/200/200"
initial={collapsed ? "collapsed" : "expanded"}
animate={collapsed ? "collapsed" : "expanded"}
variants={ImgVariants}
/>
<ToggleBtn onClick={this.toggle}>toggle</ToggleBtn>
</Content>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
如果我将when: "afterChildren"
中的when: "beforeChildren"
更改为ContentVariants
,则没有任何区别。即使删除when
属性,动画也会同时运行。
答案 0 :(得分:3)
文档传播部分(https://www.framer.com/api/motion/animation/#propagation)表示
如果运动组件有子代,则变化形式的变化将向下传播 通过组件层次结构。这些变体中的变化将流 直到子组件定义自己的动画属性。
您必须从animate
个元素中删除Img
道具。
答案 1 :(得分:1)
如果您在孩子身上设置了动画,则您的父母不会将其动画逻辑传递给它。因此,您必须从initial
组件中删除animate
和<Img>
属性:
<Img
src="https://picsum.photos/200/200"
variants={ImgVariants}
/>
您可以从官方文档中查看以下示例,以供参考:https://www.framer.com/api/motion/types/#orchestration.when