忽略首次挂载 React-Spring 的初始转换答案

【问题标题】：Ignore initial Transition for first mount React-Spring忽略首次挂载 React-Spring 的初始转换
【发布时间】：2020-04-15 16:37:40
【问题描述】：

我有一个 react 组件，它需要一个 for in 和 out 的转换。但是在第一个坐骑上它不应该使用进入动画。我使用简单的淡入淡出。 initial 关键字应该停用第一次安装的初始转换。但它不起作用。以下转换按方面工作。

我试图找到解决方案，但大多数主题已过时或不适合我。也许我误解了一些东西，因为我对 React 和 React-Spring 还很陌生。

<Transition
    native
    items={this.state.showComponent}
    initial={null}
    from={{opacity:0}}
    enter={{opacity:1}}
    leave={{opacity:0}}
>
{show => show && (props =>
    <animated.div style={props}>
        //Component content                   
    </animated.div>
)}
</Transition>

【问题讨论】：

标签： reactjs jsx react-spring

【解决方案1】：

如果您不想看到初始转换，您应该为它引入一个标志。并且基于标志，您可以更改转换的 from 属性。该标志可以是类变量或状态变量。例如：

class MyComponent extends React.Component {

initialised = false;

componentDidMount {
  initialised = true;
}

...

<Transition
    native
    items={this.state.showComponent}
    initial={null}
    from={{opacity: this.initialised ? 0 : 1}}
    enter={{opacity:1}}
    leave={{opacity:0}}
>
{show => show && (props =>
    <animated.div style={props}>
        //Component content                   
    </animated.div>
)}
</Transition>

【讨论】：