@Just_Sergey

Как реализовать анимацию удаление элемента внутри Swiper React?

Добрый день.
Возможно ли реализовать удаление слайда внутри Swiper'а с помощью React-transion-group.
<Swiper
                    onInit={swiper => setSwiper(swiper)}
                    allowTouchMove={false}
                    loop
                    modules={[Navigation, Virtual]}
                    slidesPerView={3}
                    navigation={{
                        prevEl: prevRef?.current,
                        nextEl: nextRef?.current
                    }}>
                    <TransitionGroup>
                        {children.map((item) =>
                            <SwiperSlide className={styles.slide} key={item?.key}>
                                <CSSTransition
                                    key={Math.random() * 10000}
                                    timeout={700}
                                    classNames={{
                                        enter: styles.fadeEnter,
                                        enterActive: styles.fadeEnterActive,
                                        exit: styles.fadeExit,
                                        exitActive: styles.fadeExitActive,
                                    }}
                                >
                                    <div className={styles.animationBlock}>
                                        {item}
                                    </div>
                                </CSSTransition>
                            </SwiperSlide>
                        )}
                    </TransitionGroup>
                </Swiper>


Я так понимаю проблема в том что внутри слайдера элементы клонируются и вместе с ними идет клонирование ключей. Если возможность обойти это или вы знаете другие способы как сделать анимацию. Заранее спасибо
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы