Блог

У меня есть контейнер Flexbox, состоящий из 6 видимых столбцов карт и 4 переполненных (скрытых) карт. Он заполняет весь монитор.

Используя React Spring, я хотел бы, чтобы он анимировался для перемещения влево и вправо, когда я нажимаю кнопки со стрелками. В любом случае она должна быть бесконечной.

Я написал следующее, что делает то, что я хочу, но это не гладко. Левая сторона дергается и просто исчезает, вместо того чтобы плавно скатываться.

     const [items, setItems] = useState(data);

    const moveFwd = () => {
    const array = [...items];
    const first = array[0];
    array.splice(0, 1);
    array.push(first)
    setItems(array);
}

const moveBck = () => {
    const array = [...items];
    const last = array[array.length - 1];
    array.splice(array.length - 1, 1);
    array.unshift(last)
    setItems(array);
}



const PressItems = ({posts}) => {
    
    
    const transition = useTransition(items, {
        config: config.slow,
        from: { transform: "translate3d(150%, 0,0)", opacity: 1, },
        enter: { transform: "translate3d(0%, 0,0)", opacity: 1 },
        leave: { transform: "translate3d(-150%,0, 0)", opacity: 0, position: "absolute" },
        keys: items.map((item, index) => index),
      });

   return transition((style, item) => {
        return <animated.div style={style}><PressCard data={item} /></animated.div>;
      })

       };
 

Есть идеи, как сделать это более плавным?