next使用CSS实现淡入淡出效果

项目场景

PC项目的首页Banner展示，需要背景图片采用淡入淡出的形式来进行展示

问题描述

使用的框架是next
历程：
1.使用Carousel进行操作。。。pass
2.引入第三方库 Swiper 使用EffectFade来进行淡入淡出的操作

解决方法

手写轮播图，通过CSS实现淡入淡出的动画效果

//实现代码
            <ul className="list">
                {
                    bigBanner1.map((item: any, i: number) => {
                        return (
                            <div className={css.bannerItem} key={item.id}>
                                <div key={item.id} className={`item ${index === i ? 'active' : ''}`}   >
                                    <img src={item.img} alt="" />
                                    <div className='popBox'></div>
                                </div>
                            </div>
                        )
                    })
                }

            </ul>

//css
.list { list-style: none; position: relative; }
        .item {  position: absolute; opacity: 0; transition: opacity 2s; object-fit: cover;
            cursor: pointer;
            top:0;
         }
        .item img {  
            position: relative;
            min-width: 1200px;
            width: 100%;
            height: 600px; 
            object-fit: cover;
            -o-object-position: center;
            object-position: center;
         }
```Ï

```javascript
//自动轮播功能
const [bigBanner1, setBigBanner1]: any = useState([]) //banner1
  const [index, setIndex] = useState<number>(0);
    useEffect(() => {
        const handleEventA = debounce(() => {
            console.log('A123456', bigBanner1[index], index)
            onBannerService(bigBanner1[index])
        }, 1000)

        const items = document.getElementsByClassName('item') as HTMLCollectionOf<HTMLElement>;
        const clearActive = () => {
            for (let i = 0; i < items.length; i++) {
                items[i].classList.remove('active');

            }
        };
        const goIndex = () => {
            clearActive();
            items[index].classList.add('active');
        };
        const interval = setInterval(() => {
            if (index === bigBanner1.length - 1) setIndex(0);
            else setIndex(index + 1);
        }, 5000);

        return () => {
            eventBus.off('eventA', handleEventA);
            clearInterval(interval);
        };
    }, [index]);

功能存在阉割部分