弹窗的过渡效果

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

引入文件

js/jquery-3.2.1.min.js

.modal-8旋转垂直旋转，显示以y轴为中心轴从左往右旋转，隐藏则与显示相反。通过控制.md-show来控制动画效果

<div id="modal-8"  class="md-modal md-effect-8 md-show">
    <div class="md-content">
        <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">3dFlip(horizontal)</button>
    </div>
</div>

通过js来控制#modal_8添加或移除 .md-show

$("#close_btn").click(function(){
        $("#modal-8").removeClass("md-show");
    })
    $("#open_btn").click(function(){
        $("#modal-8").addClass("md-show");
    })

.modal-9水平旋转，显示以x轴为中心轴从下往上翻转，隐藏则与之相反。通过控制.md-show来控制动画效果

<div id="modal-9"  class="md-modal md-effect-9 md-show">
    <div class="md-content">
        <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">3dFlip(vertical)</button>
    </div>
</div>

通过js来控制#modal_9添加或移除 .md-show

$("#close_btn").click(function(){
    $("#modal-9").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal-9").addClass("md-show");
})

.modal-14旋转，从页面底部出现停留在页面中间由小到大变化，给#modal-14添加或移除 .md-show。

<div id="modal-14" class="md-modal md-effect-14 md-show">
    <div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">3dRotateBottom</button>
    </div>
</div>

通过js来控制#modal_14添加或移除 .md-show

$("#close_btn").click(function(){
    $("#modal-14").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal-14").addClass("md-show");
})

以#modal-10的上边从后往前旋转显示，隐藏则与之相反,通过js控制给#modal-10添加或移除.md-show来控制效果

<div id="modal-10" class="md-modal md-effect-10 md-show">
    <div class="md-content">
        <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">3dSign</button>
    </div>
</div>

通过js来控制#modal_10添加或移除 .md-show

$("#close_btn").click(function(){
    $("#modal-10").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal-10").addClass("md-show");
})

通过js控制给#modal-13添加或移除.md-show来控制效果

<div id="modal_13" class="md-modal md-effect-13 md-show">
    <div class="md-content">
        <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">3dSlit</button>
    </div>
</div>

通过js来控制#modal_13添加或移除 .md-show

```
$("#close_btn").click(function(){
    $("#modal_13").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_13").addClass("md-show");
})
```

#modal_16淡入淡出

<div id="modal_16" class="md-modal md-effect-16 md-show">
    <div class="md-content">
        <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">blur</button>
    </div>
</div>

通过js来控制#modal_16添加或移除 .md-show

$("#close_btn").click(function(){
    $("#modal_16").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_16").addClass("md-show");
})

.modal-1 由小到大放大显示，缩小消失。

<div id="modal-1" class="md-modal md-effect-1 md-show">
    <div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">FadeIn & Scale</button>
    </div>
</div>

通过js给#modal-1添加或移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal-1").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal-1").addClass("md-show");
})

.modal_5有大缩到小显示

<div id="modal_5" class="md-modal md-effect-5 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">fall</button>
    </div>
</div>

.modal_7 从底部向上移动出现

<div id="modal_7" class="md-modal md-effect-17 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="container">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="open_btn">letMeIn</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>

通过js给#modal_7添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_7").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_7").addClass("md-show");
})

.modal_18从屏幕左侧滑出，.container缩小

<div  id="modal_18" class="md-modal md-effect-18 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="container">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="open_btn">makeWay</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>

通过js给#modal_18添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_18").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_18").addClass("md-show");
})

以#modal_4中心旋转放大出现

<div id="modal_4" class="md-modal md-effect-4 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">makeWay</button>
    </div>
</div>

通过js给#modal_4添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_4").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_4").addClass("md-show");
})

#modal_3从底部淡入上滑至页面中心

<div id="modal_3" class="md-modal md-effect-3 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">scaleIn-bottom</button>
    </div>
</div>

通过js给#modal_3添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_3").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_3").addClass("md-show");
})

#modal_2从左侧渐显滑入页面中心

<div id="modal_2" class="md-modal md-effect-2 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">scaleIn-right</button>
    </div>
</div>

通过js给#modal_2添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_2").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_2").addClass("md-show");
})

#modal_6从左侧旋转移入页面中心

<div id="modal_6" class="md-modal md-effect-6 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">side-fall</button>
    </div>
</div>

通过js给#modal_6添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_6").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_6").addClass("md-show");
})

#modal_1从页面顶部渐显滑入页面中心

<div id="modal_1" class="md-modal md-effect-19 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="container">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="open_btn">sideFromTop</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>

通过js给#modal_1添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_1").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_1").addClass("md-show");
})

#modal_5从页面顶部滑入，其上边紧贴页面顶部

<div id="modal_5" class="md-modal md-effect-7 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="md-content">
    <div class="btn-wrap">
        <button class="md-close" id="open_btn">stickyUp</button>
    </div>
</div>

通过js给#modal_5添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
        $("#modal_5").removeClass("md-show");
    })
    $("#open_btn").click(function(){
        $("#modal_5").addClass("md-show");
    })

#modal_11从大缩到小显示于页面中心

<div id="modal_11" class="md-modal md-effect-11 md-show">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="close_btn">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<div class="container">
    <div class="md-content">
        <div class="btn-wrap">
            <button class="md-close" id="open_btn">superScaled</button>
        </div>
    </div>
</div>

通过js给#modal_11添加移除 .md-show来控制显示隐藏

$("#close_btn").click(function(){
    $("#modal_11").removeClass("md-show");
})
$("#open_btn").click(function(){
    $("#modal_11").addClass("md-show");
})