Используйте реагирующую анимацию для анимации при выходе - PullRequest
Новая
       14

Используйте реагирующую анимацию для анимации при выходе

0 голосов
/ 08 апреля 2020

Я занимаюсь анимацией с emotion и react-animations. 

import "./styles.css";
import styled from "@emotion/styled";
import { keyframes } from '@emotion/core'
import * as Animations from "react-animations";

const anim = keyframes`${Animations.slideInRight}, ${Animations.slideInLeft}`;

const Text = styled.div`
  margin: 20px;
  padding: 30px;
  border: dashed thin;
  animation: 1s ${anim} ease-out;
`;

export default function App() {
  const items = ["apples", "bananas", "celery", "donuts", "eggs"];
  const [index, setIndex] = useState(0);

  const Items = items.map((item, i) =>
    index === i ? <Text key={item}>{item}</Text> : null
  );

  return (
    <Wrapper>
      {shown && Items}
      <span>
        <button onClick={() => setIndex(index - 1)}>{"<"}</button>
        <button onClick={() => setIndex(index + 1)}>{">"}</button>
      </span>
    </Wrapper>
  );
}

Когда он загружается и когда я переключаюсь с одного элемента на другой, я получаю анимацию (slideInLeft) при входе. Но предыдущий элемент просто исчезает. Как заставить старый элемент анимироваться при его выходе, пока новый элемент анимируется при его входе?

И как мне заставить его не анимировать при первой загрузке?

...