Проблема Зависает React интерфейс

[xstrasupra]

UchihaMadara написал(а):

Тебе нужно transition и transform translate, используя CSS

Нажмите для раскрытия...

Всю карусель сделать на CSS?

 

[kirillzver]

xstrasupra написал(а):

Эта часть SVG но эта часть обычная статичная картинка, другая зеленая палочка это тоже SVG, предлагаете передать картинки на CSS?

Нажмите для раскрытия...

Предлагаю переделать процесс анимации прокрутки на CSS, а картинки SVG попробуй просто отключить на время, чтобы убедиться, что не в них проблема.

 

[xstrasupra]

kirillzver написал(а):

Предлагаю переделать процесс анимации прокрутки на CSS, а картинки SVG попробуй просто отключить на время, чтобы убедиться, что не в них проблема.

Нажмите для раскрытия...

Попробую варианты все

 

[xstrasupra]

fivepkost написал(а):

JavaScript:

import React, { useRef } from 'react';

const ScrollableTileContainer = ({ activeIndex }) => {
    const containerRef = useRef(null);

    const scrollToActiveTile = (instant = false) => {
        if (!containerRef.current) return;

        const container = containerRef.current;
        const tiles = container.children;

        if (tiles.length > activeIndex && tiles[activeIndex]) {
            const tile = tiles[activeIndex];
            const offsetLeft = tile.offsetLeft - container.offsetWidth / 2 + tile.offsetWidth / 2;
            container.scrollTo({
                left: offsetLeft,
                behavior: instant ? "auto" : "smooth",
            });
        }
    };

Код:

    useEffect(() => { // Центрируем активный элемент при изменении индекса
        scrollToActiveTile();
    }, [activeIndex]);

Нажмите для раскрытия...

Забыл скинуть ещё анимации, как в этом случае будет правильно поступить:

 

[ubees]

xstrasupra написал(а):

Забыл скинуть ещё анимации, как в этом случае будет правильно поступить:

Нажмите для раскрытия...

так и будет как ты написал

JavaScript:

useEffect(() => { // Центрируем активный элемент при изменении индекса
        scrollToActiveTile();
    }, [activeIndex]);

 

[Inoi]

xstrasupra написал(а):

Всю карусель сделать на CSS?

Нажмите для раскрытия...

React Playground

Try this online React Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

playcode.io

 

[Vermilion]

Inoi написал(а):

React Playground

Try this online React Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

playcode.io

Нажмите для раскрытия...

Зашел по ссылке, 5 хуёв накидали. Не рекомендую.

 

[xstrasupra]

Кароче все решилось, мой пк говно ничего не вывез, нужна оптимизация или перевести в ксс

 

[DeAAmoN]