如何完成可视化大屏的旋转木马(react)

旋转木马是动画效果所以需要使用的动画的属性animation来进行效果实现

       1、 在确定空间盒子大小以后先需要绑定你的空间盒子如下图:      

        2、准备完成大屏需要的图片进行导入 如下图:

3、通过导入的图片先进行数组模拟 如下图:

4、将数据进行内容渲染 如下图：

5、在挂载的生命周期里面进行动画延迟如下图：(总用时20s)  根据css

6、配置css样式表

7、完成大屏可视图状 如下图:

8、如何完成滑过进行高亮效果 如下图:

9、滑入和滑出函数添加效果函数 如下图:

const onMouseEnter=(id)=>
            {
                for(let a=0;a<carouseBox.current.children.length;a++)
                {
                    carouseBox.current.children[a].style['animation-play-state']=`paused`
                }
                let caroueData=data.find(item=>item.id==id)
                caroueData.active=!caroueData.active
                setData([...data])
            }
        
        const onMouseLeave=(id)=>
            {
                for(let a=0;a<carouseBox.current.children.length;a++)
                {
                    carouseBox.current.children[a].style['animation-play-state']=`running`
                }
                let caroueData=data.find(item=>item.id==id)
                caroueData.active=!caroueData.active
                setData([...data])
            }

10、高亮滑过效果 如下图：