javascript - L'événement click js, utilisant la transition css3 pour la transition, n'a aucun effet.

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

Parce que display是状态属性，也就是说，它的改变会导致从一个状态直接跳到另外一个状态，所以不存在渐变动画。如果需要隐藏，建议使用opacity来做。opacity est un attribut qui contrôle la transparence. Lorsque la transparence est 0, l'élément n'est pas visible.

Aussi, un rappel de vos #box样式里写了两次displayattributs.

Answer 2

Si vous souhaitez utiliser la transition, vous pouvez aussi bien remplacer display:none par height:0 ou width:0, et le masquer de la hauteur ou de la largeur

Answer 3

Ce que vous voulez, c'est l'effet d'animation de la fenêtre lors de la fermeture de la boîte de dialogue de discussion ? Pour fusionner et fermer ou disparaître sur le côté droit, utilisez un cadre, c'est facile à réaliser