忽略第一次挂载 React-Spring 的初始转换

Question

我有一个 React 组件需要进出转换。但是在第一次安装时它不应该使用进入动画。我使用简单的淡入淡出。 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>

Answer 1

如果您不想看到 initail 转换，您应该为它引入一个标志。根据标志，您可以更改转换的 from 属性。该标志可以是 class 变量或状态变量。例如：

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>

忽略第一次挂载 React-Spring 的初始转换

Ignore initial Transition for first mount React-Spring

jsx

reactjs

react-spring