jquery addclass removeclass的时候，transistion无效，如何解决？

.hide {
        transition: all 1s;
        -webkit-transition: all 1s;
        display: none;
    }

    #bg-mask {
        transition: all 1s;
        -webkit-transition: all 1s;
        backdrop-filter: blur(6px);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: black;
        opacity: 0.5;
    }


    $(function () {
        $("#couponText").click(function (e) {
            $('#popup').removeClass('hide')
            $("#bg-mask").removeClass("hide")
            e.stopPropagation()
        })
        $("#dialogClose").click(function () {
            $('#popup').addClass('hide')
        })
        document.body.onclick = function closePopup(e) {
            if (!$("#popup").hasClass("hide") && !$(e.target).closest($('#popup')).length) {
                $("#popup").addClass("hide")
                $("#bg-mask").addClass("hide")
                $(document).unbind('click', closePopup);
            }
        }
    })