实现两个面板上下切换，结合amimate动画

仅作个人记录收藏

实现两个面板上下切换，结合amimate动画

<div class="carousel-box">
            <ul class="carousel-list layui-clear">
                <li id="carouselItem" class="carousel-list-item  animate__animated carousel-list-item-front ">
                    <div class="carousel-header">
                        <h1>热门资源</h1>
                    </div>
                    <div class="carousel-body">
                        <ul class="resource-list">
                            <li>
                                <div class="resource-num">
                                    <img src="../images/icon_rmzy_1.png" alt="">
                                </div>
                                <p class="resource-title">土地利用现状</p>
                            </li>
                            <li>
                                <div class="resource-num">
                                    <img src="../images/icon_rmzy_2.png" alt="">
                                </div>
                                <p class="resource-title">地理国情</p>
                            </li>
                            <li>
                                <div class="resource-num">
                                    <img src="../images/icon_rmzy_3.png" alt="">
                                </div>
                                <p class="resource-title">地名地址吧啦吧啦吧啦吧啦吧啦</p>
                            </li>
                            <li>
                                <div class="resource-num">4</div>
                                <p class="resource-title">地理国情</p>
                            </li>
                            <li>
                                <div class="resource-num">5</div>
                                <p class="resource-title">地名地址</p>
                            </li>
                            <li>
                                <div class="resource-num">6</div>
                                <p class="resource-title">土地利用现状吧啦吧啦吧啦吧啦吧啦吧啦</p>
                            </li>
                            <li>
                                <div class="resource-num">7</div>
                                <p class="resource-title">土地利用现状</p>
                            </li>
                            <li>
                                <div class="resource-num">8</div>
                                <p class="resource-title">土地利用现状啦吧啦</p>
                            </li>
                        </ul>
                        <div class="chart-render" id="resourceDataHot"></div>
                    </div>

                </li>
                <li class="carousel-list-item animate__animated">
                    <div class="carousel-header">
                        <h1>最新资源</h1>
                    </div>
                    <div class="carousel-body">
                        <ul class="resource-list">
                            <li>
                                <div class="resource-num">
                                    <img src="../images/icon_rmzy_1.png" alt="">
                                </div>
                                <p class="resource-title">土地利用现状</p>
                            </li>
                            <li>
                                <div class="resource-num">
                                    <img src="../images/icon_rmzy_2.png" alt="">
                                </div>
                                <p class="resource-title">地理国情</p>
                            </li>
                            <li>
                                <div class="resource-num">
                                    <img src="../images/icon_rmzy_3.png" alt="">
                                </div>
                                <p class="resource-title">地名地址吧啦吧啦吧啦吧啦吧啦</p>
                            </li>
                            <li>
                                <div class="resource-num">4</div>
                                <p class="resource-title">地理国情</p>
                            </li>
                            <li>
                                <div class="resource-num">5</div>
                                <p class="resource-title">地名地址</p>
                            </li>
                            <li>
                                <div class="resource-num">6</div>
                                <p class="resource-title">土地利用现状吧啦吧啦吧啦吧啦吧啦吧啦</p>
                            </li>
                            <li>
                                <div class="resource-num">7</div>
                                <p class="resource-title">土地利用现状</p>
                            </li>
                            <li>
                                <div class="resource-num">8</div>
                                <p class="resource-title">土地利用现状啦吧啦</p>
                            </li>
                        </ul>
                        <div class="chart-render" id="resourceDataLatest"></div>
                    </div>
                </li>
            </ul>
        </div>

 //资源数据
        function resourceRender() {
            //资源数据
            var resourceData = [703, 490, 380, 288, 197, 150, 98, 70];
            var resourceDataChart = [];
            resourceData.reverse().forEach(function (item, index) {
                resourceDataChart.push(-item);
            })
            var resourceOption = {
                tooltip: {
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '20%',
                    bottom: '2.5%',
                    top: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        show: false
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        show: false
                    }
                ],
                series: [
                    {
                        name: 'Expenses',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'right',
                            formatter: function (params) {
                                return -params.value;
                            },
                            padding: [0, 0, 0, 15],

                        },
                        itemStyle: {
                            normal: {
                                // 每根柱子颜色设置
                                color: function (params) {
                                    const colorList = [
                                        new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            1,
                                            0,
                                            [
                                                { offset: 0, color: '#f9d749' },
                                                { offset: 1, color: '#ebb25e' }
                                            ],
                                            false
                                        ),
                                        // 2
                                        new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            1,
                                            0,
                                            [
                                                { offset: 0, color: '#d3dce0' },
                                                { offset: 1, color: '#a5c0cb' }
                                            ],
                                            false
                                        ),
                                        // 3
                                        new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            1,
                                            0,
                                            [
                                                { offset: 0, color: '#e8cc9c' },
                                                { offset: 1, color: '#c79e59' }
                                            ],
                                            false
                                        ),
                                        // 4
                                        new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            1,
                                            0,
                                            [
                                                { offset: 0, color: '#9ccde8' },
                                                { offset: 1, color: '#3f7be8' }
                                            ],
                                            false
                                        ),
                                    ]
                                    if (params.dataIndex == 7) {
                                        return colorList[0];
                                    } else if (params.dataIndex == 6) {
                                        return colorList[1];
                                    } else if (params.dataIndex == 5) {
                                        return colorList[2];
                                    } else {
                                        return colorList[3];
                                    }
                                    return colorList[params.dataIndex]
                                },
                                borderRadius: 15
                            }
                        },
                        barWidth: 9,
                        emphasis: {
                            focus: 'series'
                        },
                        data: resourceDataChart
                    }
                ]
            };
            var resourceElem = document.getElementById('resourceDataHot');
            var resourceChart = echarts.init(resourceElem);
            resourceChart.setOption(resourceOption);

            var resourceElemLatest = document.getElementById('resourceDataLatest');
            var resourceChartLatest = echarts.init(resourceElemLatest);
            resourceChartLatest.setOption(resourceOption);

            timer = setInterval(function () {
                animateCarousel();
            }, 4000)
            $('.carousel-list-item').mouseleave(function () {
                timer = setInterval(function () {
                    animateCarousel();
                }, 4000)
            })
        }
        $('.carousel-list-item').mouseenter(function () {
            clearInterval(timer);
        })

function animateCarousel() {
        if ($('#carouselItem').hasClass('carousel-list-item-front')) {
            $('#carouselItem').removeClass('carousel-list-item-front');
            $('#carouselItem').siblings().addClass('carousel-list-item-front');
            $('#carouselItem').siblings().addClass('animate__zoomIn');
        } else {
            $('#carouselItem').siblings().removeClass('carousel-list-item-front');
            $('#carouselItem').addClass('carousel-list-item-front');
            $('#carouselItem').addClass('animate__zoomIn');
        }
        setTimeout(function () {
            $('#carouselItem').removeClass('animate__zoomIn');
            $('#carouselItem').siblings().removeClass('animate__zoomIn');
        }, 1000)
    }

.carousel-box{
    width: 44%;
    height: 100%;
    float: left;
}
.carousel-list{
    position: relative;
    height: 100%;
}
.carousel-list-item {
    box-shadow: 0 0 24px 1px #e0e1e2;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    margin: auto;
    width: 69%;
    height: 564px;
    z-index: 0;
}
.carousel-list-item-front{
    width: 95%;
    height: 430px;
    z-index: 1;
}

.carousel-list-item .carousel-header{
    height: 46px;
    margin: 23px auto 2px;
    text-align: center;
}
.carousel-list-item .carousel-header h1{
    width: 108px;
    background: url('../images/rmzy_wxz.png') center center no-repeat;
    color: #333;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    margin: 0 auto;
    position: relative;
}

.carousel-list-item .carousel-header h1:before{
    content: '';
    position: absolute;
    width: 186px;
    height: 3px;
    left: -200px;
    top: 15px;
    background: url('../images/rmzy_line_r.png') no-repeat;
}
.carousel-list-item .carousel-header h1:after{
    content: '';
    position: absolute;
    width: 186px;
    height: 3px;
    right: -200px;
    top: 15px;
    background: url('../images/rmzy_line_l.png') no-repeat;
}
.carousel-list-item-front .carousel-header h1:before{
    content: '';
    position: absolute;
    width: 109px;
    height: 10px;
    left: -130px;
    top: 15px;
    background: url('../images/rmzy_jiantou_r.png') no-repeat;
}
.carousel-list-item-front .carousel-header h1:after{
    content: '';
    position: absolute;
    width: 109px;
    height: 10px;
    right: -130px;
    top: 15px;
    background: url('../images/rmzy_jiantou_l.png') no-repeat;
}
.carousel-list-item-front .carousel-header h1{
    width: 168px;
    background: url('../images/rmzy_xz.png') center center no-repeat;
    color: #fff;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
}
.carousel-list .carousel-body{
    height: 359px;
    padding: 0 4%;
    box-sizing: border-box;
}

.carousel-list .resource-list {
    width: calc(100% - 350px);
    height: 100%;
    float: left;
}
.carousel-list .chart-render {
    width: 350px;
    height: 100%;
    float: left;
}
.carousel-list .resource-list li{
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
}

.carousel-list .resource-list .resource-num{
    float: left;
    width: 46px;
    text-align: center;
    font-style: italic;
    color: #88adba;
    font-size: 18px;
    margin-right: 5px;
}