反应：春季过渡行为不正常答案

【问题标题】：React: Spring transition not behaving properly反应：春季过渡行为不正常
【发布时间】：2020-06-07 04:23:05
【问题描述】：

我最近开始使用 React 和 JavaScript。我一直在阅读 Transition 组件的 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;

谢谢！

【问题讨论】：

无法运行你的代码，伙计，你能在这里创建一个实例吗？我开始了，但似乎我错过了一些东西stackblitz.com/edit/react-zwjsnw - 你可以分叉然后编辑
@godblessstrawberry 那里，修好了！ Link

标签： javascript reactjs react-spring

【解决方案1】：

Transtition 更改了示例中的不透明度，但您从未将更改的值提供给渲染的组件。它缺少箭头函数中的 prop 参数。您应该将此道具添加到组件的样式属性中。

例如：

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

组件是这样的：

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

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

我在这里也使用了 animated.div 并将原生属性添加到 Transition 以获得更好的性能。

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

【讨论】：

就是这样！谢谢！