幻灯片效果遇到了一些问题

Question

当我点击<div class="itemBox">时，它会显示具有上滑效果的对应<div class="workItem>。（每个workItem有不同的ID，itemBox也有不同href，它可以正常工作）

每个workItem都有关闭自己的按钮，它看起来像fadeOut ......但我需要它们以滑动效果关闭。

有我的代码，我需要一些建议。

  

HTML

            <div class="itemBox">
                <a href="#work1"></a>
                <div class="wrap" style="background-image:url('img/01.jpg')"></div>
                <div>titletitle</div>
            </div>

            <div class="itemBox">
                <a href="#work2"></a>
                <div class="wrap" style="background-image:url('img/02.jpg')"></div>
                <div>titletitle</div>
            </div>

            <div class="itemBox">
                <a href="#work3"></a>
                <div class="wrap" style="background-image:url('img/01.jpg')"></div>
                <div>titletitle</div>
            </div>

workItem↓

<div class="workContent">
        <div class="workItem customScroll" id="work1" style="background-color:#999999;">
            <div class="wrapper" id="workBox1"></div>
        </div>

        <div class="workItem customScroll" id="work2" style="background-color:#333333;">
            <div class="wrapper" id="workBox2"></div>
        </div>

        <div class="workItem customScroll" id="work3" style="background-color:#333333;">
            <div class="wrapper" id="workBox3"></div>
        </div>
</div>

  

JS

var refElement = []; 
        $('.workItem').each(function(index,el){
            refElement[index] = $(this).attr('id');
            $(".itemBox").each(function(index, el) {
                $(this).on('click', 'a', function(e) {
                    var target = $(this).attr('href');
                    $('.workItem').removeClass('workOpen');
                    $('.workItem').removeClass('workClose');
                    $('.workItem').attr('style','');
                    if(refElement[index]=target) {
                        $(refElement[index]).removeClass('workClose');
                        $(refElement[index]).addClass('workOpen');
                        $('body').addClass('lockBody');

                    }
                    $('html, body').scrollTop(0);
                    return false;
                });  
            });

        });
        function closeWork(){
            $('.close').click(function(){
                var workItem = $(this).parents('.workItem');
                if(workItem.hasClass('workOpen')){
                    workItem.hide("slow",function(){
                        workItem.removeClass('workOpen');
                        workItem.addClass('workClose');
                    });
                    $('body').removeClass('lockBody');
                }
            });
        }

  

CSS（SCSS）

    .workItem {
    display: none;
    bottom:0;

    &.workOpen {
        display: block;
        opacity: 1;
        position: absolute;
        color:#ffffff;
        background-color: #787878;
        z-index: 5;

        overflow: auto;
        height: calc(100% - 102px);
        width: 100% !important;
        left: 0;
        animation-name: slide;
        animation-duration: 1s;
        animation-fill-mode: forwards;

        -webkit-animation-name: slide;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
    }

    &.workClose {
        bottom: 0;
        opacity: 1;
        height: 0;
    }

    img {
        width: 100%;
        margin-bottom: 40px;
    }
}

@keyframes slide {
    from {
        height: 0;
    }
    to {
        height: calc(100% - 102px);
    }
}