Анимировать один компонент, когда он выходит из DOM с React Spring? - PullRequest
Новая
       3

Анимировать один компонент, когда он выходит из DOM с React Spring?

0 голосов
/ 06 февраля 2019

Я оживляю компоненты внутри и из DOM с помощью React Spring.Если бы все элементы имели одинаковую анимацию, то для меня это будет нормально работать: 

    <Transition
      items={items}
      keys={item => item.id}
      from={{ opacity: 0 }}
      enter={{ opacity: 1 }}
      leave={{ opacity: 0 }}
    >
      {item => props => (
        <div style={props}>
          <Component {...item} />
        </div>
      )}
    </Transition>

Однако мне нужно отдельно контролировать delay и duration для каждого компонента (в зависимости от состояния) и дажекомпонент вообще анимируется.

В документах написано, что "Переходы также могут принимать один элемент", однако я не могу заставить его работать на меня.

https://react -spring-renderprops.surge.sh / transition # / red 

{
    items.map(item=>(
        <Transition
          items={item}
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
        >
            {item => props => {
                // Custom logic could go here? 
                return(
                    <div style={props}>
                        <Component {...item} />
                    </div>
                )
            }}
        </Transition>
    )
}

Обратите внимание, что мой массив items происходит из Redux, поэтому элементы могутбыть добавлены / удалены извне.

...