与React Transition Group和React-Carousel进行页面转换

问题描述

我对使用React Transition Group的页面过渡和React-router之间的关系有疑问。

我遵循了一些教程，以使页面转换与我的所有页面均能很好地工作，除了我用https://github.com/brainhubeu/react-carousel制作轮播的页面上

当我转到带有轮播的页面时，我得到了一个奇怪的滞后效果，经过长时间的研究，我只是找不到问题的原因。

我尝试更改动画库，但我也无法使其正常工作。

我确定我确实缺少一些明显的东西，但是我无法把手放在上面x）

我已经制作了一个非常简单的版本来说明问题，可以在netlify上找到它：https://kind-kilby-af855b.netlify.app/gallery2

对于代码部分，我制作了一个AnimatedSwitch组件，该组件根据您所在的路线和您导航至的路线（routes是一个以我的路线路径为字符串的数组）添加动画：

import React,{ cloneElement } from 'react'
import { useLocation,Switch,Route } from 'react-router-dom';
import { TransitionGroup,CSSTransition } from "react-transition-group";
import routes from '../../data/pages'
import Gallery from '../Gallery/Gallery'

function AnimatedSwitch() {
    const location = useLocation()
    const currentScreen = routes.indexOf(location.pathname)
    const previousScreen = location.state ? location.state.previousScreen : 0
    var className = currentScreen > previousScreen ? "slide-forward" : "slide-backward"

    return (
        <TransitionGroup
            childFactory={child => (
                cloneElement(child,{
                    classNames: className
                })
            )}
        >
            <CSSTransition key={location.pathname} timeout={1000} enter={true} exit={true}>
                <Switch location={location} key={location.pathname}>
                    <Route exact path="/gallery1">
                        <Gallery />
                    </Route>
                    <Route exact path="/gallery2">
                        <Gallery />
                    </Route>
                    <Route exact path="/gallery3">
                        <Gallery />
                    </Route>
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    )
}

export default AnimatedSwitch

这是我的Gallery组件（此处使用picsum进行测试）：

import React,{ useState,useEffect } from 'react'
import CarouselElem from './CarouselElem'
import Carousel from '@brainhubeu/react-carousel'
import '@brainhubeu/react-carousel/lib/style.css'
import { useLocation } from 'react-router-dom'

function Gallery() {
    const location = useLocation()
    const [carouselIndex,setCarouselIndex] = useState(0)
    const [images,setImages] = useState([])

    useEffect(() => {
        var images =[]
        
        for(var i = 0; i < 50; i++){        
            const x = 400
            const y = 200
            images[i] = "https://picsum.photos/" + x + "/" + y;
        }

        setImages(images)
    },[location])

    return (
        <section className="gallery">
            <Carousel className="nav-list" infinite centered slidesPerPage={12} draggable={false} clickToChange value={carouselIndex} onChange={(index) => {setCarouselIndex(index)}} breakpoints={{
                700: {
                    slidesPerPage: 6
                }
            }}>
                {
                    images.map((image,index) => (
                        <img src={image} key={`${image.url}-${index}-up`} className="slider-img" />
                    ))
                }
            </Carousel>
            <Carousel infinite centered slidesPerPage={2} draggable={false} clickToChange value={carouselIndex} onChange={(index) => {setCarouselIndex(index)}} breakpoints={{
                700: {
                    slidesPerPage: 1
                },500: {
                    slidesPerPage: 1,arrows: true
                }
            }}>
                {
                    images.map((image,index) => (
                        <CarouselElem image={image} setShowLightbox={setShowLightbox} key={`${image.url}-${index}-main`}/>
                    ))
                }
            </Carousel>
            <Carousel className="nav-list" infinite centered slidesPerPage={12} draggable={false} clickToChange value={carouselIndex} onChange={(index) => {setCarouselIndex(index)}} breakpoints={{
                700: {
                    slidesPerPage: 6
                }
            }}>
                {
                    images.map((image,index) => (
                        <img src={image} key={`${image.url}-${index}-down`} className="slider-img" />
                    ))
                }
            </Carousel>
        </section>
    )
}

export default Gallery

我的CarouselElem组件是正义的，带有覆盖层的图像。

对不起，我的英文，这是我在StackOverflow上的第一篇文章。

非常感谢；）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）