反应:弹簧过渡行为不正常

Question

我最近开始使用React和JavaScript。我一直在阅读 Spring API 文档的过渡组件，并在进行一些测试时最终得到了这段代码。现在，我期望平稳过渡，但得到了以下顺序：

• 当开关更改时，安装的元件会突然出现。
• 一段时间过去了(这取决于我选择的配置(
• 卸载的那个消失了(也突然消失了(

对于我在文档中读到的内容，我无法看到我在这里做错了什么，所以任何帮助都非常受欢迎。我已经测试了不同的配置，并且总是得到这个顺序。

PS：内容只是一个以背景颜色为道具的普通div，所以没有什么花哨的。

import React from 'react';
import './App.css';
import Content from './components/content';
import {Transition, config} from 'react-spring/renderprops';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
switch: false
};
}
render() {
return (
<div id="container" onClick={() => {this.setState({switch: !this.state.switch})}}>
<Transition
config={config.slow}
items={this.state.switch}
from={{opacity: 0}}
enter={{opacity: 1}}
leave={{opacity: 0}}>
{s => s ? () => <Content backgroundColor="rgb(37, 95, 142)"></Content>
: () => <Content backgroundColor="rgb(37, 142, 118)"></Content>}
</Transition>
</div>
);
}
}
export default App;

谢谢！

Answer 1

Transtition 会更改示例中的不透明度，但您永远不会将更改的值提供给渲染的组件。它缺少箭头函数中的 prop 参数。您应该将此 prop 添加到组件的 style 属性中。

例如：

props => (<Content props={props} backgroundColor="rgb(37, 95, 142)" />)

组件是这样的：

const Content = ({ backgroundColor, props }) => (
<animated.div style={{ backgroundColor, ...props }}>Content</animated.div>
);

现在你可以看到不透明度的变化。

我还在这里使用了animated.div，并将本机poperty添加到Transition以获得更好的性能。

这是我的例子： https://codesandbox.io/s/ecstatic-wood-7p1ym?file=/src/App.js