• 遇到的問題： 彈框想加CSS3效果，出來時(shí)，有動(dòng)畫效果，然而點(diǎn)擊關(guān)閉時(shí)，動(dòng)畫是有，但是彈框消失動(dòng)畫結(jié)束后，任然再出現(xiàn)

// 動(dòng)畫代碼
/*遮罩層 彈出動(dòng)畫*/
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes amt-modal-in {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        opacity: 1;
    }
}

@keyframes amt-modal-in {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
}

@-webkit-keyframes amt-modal-out {
    to {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
}

@keyframes amt-modal-out {
    to {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,1);
        transform: scale3d(.5,.5,1);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
}


// 遮罩層代碼
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    /* animation: zoomIn 0.5s;
    -webkit-animation: zoomIn .5s; */
}
.mask .apply-alert {
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-top: 50%;
    transform: translateY(-30%);
    animation: zoomIn .5s;
    -webkit-animation: zoomIn .5s;
}

/*漸隱退出*/
.mask.out {
    display: none;
}
.mask.out .apply-alert {
    animation: amt-modal-out .6s;
    -webkit-animation: amt-modal-out .6s;
}

// 只要一開始 將 mask hide,點(diǎn)擊某按鈕時(shí),$(.mask).show(); 此時(shí)彈框會出現(xiàn)動(dòng)畫
      // 點(diǎn)擊確認(rèn)
    $(".j-msg-footer").on("click",function(){
        $(".mask").addClass("out");
                // 因?yàn)閯?dòng)畫 0.6s 所以 .5s 后 就將 out動(dòng)畫類去掉
        setTimeout(function(){
            $(".mask").hide().removeClass("out");
        },500);
    });