Игнорировать начальный переход для первой установки React-Spring

У меня есть компонент реакции, который требует перехода для входа и выхода. Но на первом монтировании не должно быть анимации входа. Я использую простое постепенное исчезновение. ключевое слово 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
person Solesins    schedule 24.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы не хотите видеть переход initail, вам следует установить для него флаг. И на основе флага вы можете изменить свойство перехода 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>
person Peter Ambruzs    schedule 26.12.2019