javascript - Das JS-Klickereignis, das den CSS3-Übergang für den Übergang verwendet, hat keine Auswirkung auf den folgenden 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

因为display是状态属性，也就是说，它的改变会导致从一个状态直接跳到另外一个状态，所以不存在渐变动画。如果需要隐藏，建议使用opacity来做。opacity是控制透明度的属性，当透明度为0时，元素就不可见了。

另外，提醒一下，你的#box样式里写了两次display属性。

Answer 2

你如果要用transition不妨不用display:none换成height:0或者width:0，从高度或宽度上来隐藏

Answer 3

你想要的是关闭聊天对话框的窗口动画效果？合并关闭或者右侧淡出，用框架吧，容易实现