Question

我最近开始使用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;

谢谢！

Answer 1

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

例如：

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

该组件是这样的：

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

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

我在这里还使用了animation.div，并在Transition中添加了本机属性，以提高性能。

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

反应：春季过渡行为异常

1 个答案: