javascript - js click event, using css3 transition for transition, has no effect. The following code

Question

html

<section id="dialog">
    <p id="box">
        <p id="close">x</p>
    </p>
    <p id="bg"></p>
</section>
<footer id="store-footer">
    <p class="footer-item price" id="btn">在线询价</p>
    <p class="footer-item goin">加入购物车</p>
    <p class="footer-item collect">立即购买</p>
</footer>

css

#bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7,17,27,0.5);
    z-index: 999;
    display: none;
    border-radius: 0.5rem;
    transition:all 2s;
    -moz-transition:all 2s; /* Firefox 4 */
    -webkit-transition:all 2s; /* Safari and Chrome */
    -o-transition:all 2s; /* Opera */
}
#box {
    position: fixed;
    width: 80%;
    height: 30%;
    top: 30%;
    left: 10%;
    display: block;
    margin: 0 auto;
    background-color: #fff;
    z-index: 1000;
    display: none;
    border-radius: 0.5rem;
    transition: 2s;
    -moz-transition: 2s; /* Firefox 4 */
    -webkit-transition: 2s; /* Safari and Chrome */
    -o-transition: 2s; /* Opera */
}

js

<script>
    window.onload = function() {
        var box = document.getElementById("box");
        var bg = document.getElementById("bg");
        var btn = document.getElementById("btn");
        var close = document.getElementById("close");
        btn.onclick = function() {
            box.style.display = "block";
            bg.style.display = "block";
        }
        close.onclick = function(){
            box.style.display = "none";
            bg.style.display = "none";
        }
    }
</script>

Answer 1

Because display is a state attribute, that is to say, its change will cause it to jump directly from one state to another, so there is no gradient animation. If you need to hide it, it is recommended to use opacity. opacity is an attribute that controls transparency. When the transparency is 0, the element is invisible.

Also, a reminder, the display attribute is written twice in your #box style.

Answer 2

If you want to use transition, you might as well replace display:none with height:0 or width:0, and hide it from the height or width

Answer 3

What you want is the window animation effect of closing the chat dialog box? To merge and close or fade out on the right side, use a frame, it’s easy to achieve