javascript - acara klik js, menggunakan peralihan css3 untuk peralihan, tidak mempunyai kesan Kod berikut

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

Kerana display是状态属性，也就是说，它的改变会导致从一个状态直接跳到另外一个状态，所以不存在渐变动画。如果需要隐藏，建议使用opacity来做。opacity ialah atribut yang mengawal ketelusan Apabila ketelusan ialah 0, elemen itu tidak kelihatan.

Selain itu, peringatan tentang #box样式里写了两次displaysifat anda.

Answer 2

Jika anda ingin menggunakan peralihan, anda juga boleh menggantikan display:none dengan ketinggian:0 atau lebar:0, dan menyembunyikannya daripada ketinggian atau lebar

Answer 3

Apa yang anda mahukan ialah kesan animasi tetingkap menutup kotak dialog sembang? Untuk bergabung dan menutup atau pudar di sebelah kanan, gunakan bingkai, ia mudah dicapai