Как справиться с изменением высоты при использовании translate3d с реактивной пружиной? - PullRequest
Новая
       37

Как справиться с изменением высоты при использовании translate3d с реактивной пружиной?

0 голосов
/ 29 мая 2019

Я пытаюсь анимировать из / в другой компонент, когда нажимаю кнопку.Я использую useTransition от react-spring.При этом анимация работает, однако моя высота смещается, когда анимация продолжается.

Я пытался поместить различные значения positions на animated.div (из react-spring) и установить фиксированную высоту.в теме.Но, похоже, ничего не работает. 

// The state that keeps track on the current component
const [index, setIndex] = useState(0);

// My function that updates my state
const onClick = useCallback(() => setIndex(state => (state === 0 ? 1 : 0)), []);

// The transition I'm using
const transitions = useTransition(index, p => p, {
    from: {
        opacity: 0,
        transform: index === 0 ? "translate3d(-100%,0,0)" : "translate3d(100%,0,0)"
    },
    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
    leave: {
        opacity: 0,
        transform: index === 0 ? "translate3d(50%,0,0)" : "translate3d(-50%,0,0)"
    }
});

// My components
const pages = [
    ({ style }) => <animated.div style={style}>1</animated.div>,
    ({ style }) => <animated.div style={style}>2</animated.div>
]

// How I'm rendering out the component
{transitions.map(({ item, props, key }) => {
    const Page = pages[item];
    return <Page key={key} style={props} />;
})}

Анимация работает, однако высота смещается.Я сделал небольшую кодовую коробку, которая демонстрирует это здесь: https://codesandbox.io/s/dry-thunder-ydkg8

Но в моем фактическом коде мой рост выглядит так: https://youtu.be/7cGLOK7fCco

1 Ответ

0 голосов
/ 29 мая 2019

Вам нужно использовать position:absolute на двух элементах, чтобы избежать этого сдвига (и добавить position:relative на один из родительских контейнеров) - (см. обновленные коды и поле ): 

const pages = [
    ({ style }) => (
      <animated.div
        style={{
          ...style,
          position: "absolute",
          top: "0",
          backgroundColor: "red"
        }}
      >
        First page
      </animated.div>
    ),
    ({ style }) => (
      <animated.div
        style={{
          ...style,
          position: "absolute",
          top: "0",
          backgroundColor: "blue"
        }}
      >
        Second page
      </animated.div>
    )
  ];
...