黑马商城项目_商城购物车页面

单击垃圾筐、弹出黑色遮罩（弹出层），然后显示对话框，同时垃圾筐该演示动画！

1、每一个垃圾筐绑定click事件

/*获取所有的删除按钮*/
    var deleteList = document.querySelectorAll('.deleteBox');
    /*记录当前点击的是哪个按个按钮*/
    var deleteBtn = null;
    for(var i = 0 ; i < deleteList.length ; i ++){
        deleteList[i].onclick = function(){
            /*1.显示弹出层*/
            hmWin.style.display = "block";
            /*2.做动画*/
            hmWinBox.classList.add('bounceInDown');
            /*删除盒子需要做*/
            console.log(this);

            deleteBtn = this;
            var up = deleteBtn.querySelector('.up');
            console.log(up);
            /*加过渡*/
            up.style.webkitTransition = "all 1s";
            up.style.transition = "all 1s";
            /*定义旋转原点*/
            up.style.webkitTransformOrigin = "0 5px";
            up.style.transformOrigin = "0 5px";
            /*加改变*/
            up.style.webkitTransform = "rotate(-30deg) translateY(2px)";
            up.style.transform = "rotate(-30deg) translateY(2px)";
        }
    }

2、弹出层样式表

/*弹出层*/
.hm_win{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
}

3、弹出层

<div class="hm_win">
        <div class="hm_win_box">
            <div class="text">您确定删除这个商品吗？</div>
            <div class="btn clearfix">
                <a href="#" class="cancel">取消</a>
                <a href="#" class="submit">确定</a>
            </div>
        </div>
    </div>

4、弹出层中对话框的动画效果 .bounceInDown添加此样式

.bounceInDown{
    -webkit-animation: bounceInDown 1s;
    animation: bounceInDown 1s;
}

@keyframes bounceInDown {
    0%{
        opacity: 0;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    60%{
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    75%{
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    90%{
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    100%{
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

5、垃圾桶盖的动画效果

/*加过渡*/
            up.style.webkitTransition = "all 1s";
            up.style.transition = "all 1s";
            /*定义旋转原点*/
            up.style.webkitTransformOrigin = "0 5px";
            up.style.transformOrigin = "0 5px";
            /*加改变*/
            up.style.webkitTransform = "rotate(-30deg) translateY(2px)";
            up.style.transform = "rotate(-30deg) translateY(2px)";