transition设置display没动画效果


<html>
<head>
    <title></title>
    <style type="text/css">
        .box {
            width: 100%;
            height: 900px;
            position: fixed;
            opacity: 0;
            display: none;
            background: rgba(0,0,0,0.2);
            transition: opacity 0.25s;
        }
        .main {
            background: white;
            width: 200px;
            height: 200px;
            margin-top: -300px;
            margin:0 auto 0 auto;
            transition: all 0.35s ease;
            border-radius: 8px;
            box-shadow:0 6px 15px #989898;
        }
        .active {
            opacity: 1;
        }
        .childActive {
            margin-top: 100px;
        }

    </style>
</head>
<body>
<button onclick="clk()">按钮</button>
<div class="box" onclick="alert('点到我啦！！痛痛痛！！！')">
    <div class="main"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    var bool = true;

    function clk(){
        bool = !bool;
        if(bool){
            $('.box').css('display','block');
            setTimeout(function(){
                $('.box').addClass('active');
                $('.main').addClass('childActive');
            },0)
        }else{
            $('.box').removeClass('active');
            $('.main').removeClass('childActive');
        }
        $('.box').on('transitionend',function(){
            if(!bool){
                $('.box').css('display','none');
            }
        })
    }
    clk();
</script>

</body>
</html>