Как сделать анимацию для Div в реагировать с использованием реагировать-весна, когда прячешься? - PullRequest
Новая
       22

Как сделать анимацию для Div в реагировать с использованием реагировать-весна, когда прячешься?

1 голос
/ 27 сентября 2019

как для реакции с сокрытием реагирующей пружины для создания анимации для div при нажатии на кнопку {aa}?

https://codesandbox.io/s/silly-feistel-j1snp

  const props = useSpring({config: { duration: 1250 },opacity: 1, from: {opacity: 0}});
  const foo =() =>{
    setAa(!aa)
  }
  return (
    <div className="App">

      <div onClick={()=>foo()}>aa</div>
      <br/>
      {aa &&
      <animated.div  style={props}>I will fade in</animated.div>}   
    </div>````

1 Ответ

3 голосов
/ 27 сентября 2019

Вам нужно использовать useTransition вместо useSpring: 

  const transitions = useTransition(aa, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

И в методе рендеринга: 

  return (
    <div className="App">
      <div onClick={() => foo()}>aa</div>
      <br />
      {transitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div key={key} style={props}>
              I will fade in
            </animated.div>
          )
      )}
    </div>
  );

Рабочий пример: https://codesandbox.io/s/modest-pine-2dr7s

Документы: https://www.react -spring.io / docs / hooks / use-transition

...