【前端学习笔记】做一个模态框窗口弹出，有动画哦

版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/89403756

CSS3有了三种特殊效果的处理方式：过渡（transition），动画（animation），变化（transform）。

CSS3标准化前，各主流浏览器靠前缀提供样式支持。

-webkit-transition-delay: 300ms;//webkit
-o-transition-delay: 300ms;//opera
-moz-transition-delay: 300ms;//moz
-ms-transition-delay: 300ms;
transition-delay: 300ms;

定义：

在 UI设计中，模态窗口是附属于主窗口的图形控制元素，它创建了一种状态模式，在这种状态模式下，主窗口无法被直接访问。当模态框出现之后，如果用户想要再回到主窗口操作，就必须先与模态框自身进行交互，也就是通过这样的形式中断了应用程序主窗口的正常工作流。
对话框一般分为两种类型：模态类型（ modal ）与非模态类型（ modeless ）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。

下面我们来实现一个模态窗口-「某种特定状态下的窗体」。

弹出窗口布局

弹窗在浏览器可见窗口可见，设置position：fixed
CSS**变换特效(transform)**的平移translate函数可达到目的。这里补充下变换效果有哪些函数：
translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。
translateX(value)：水平方向平移。
translateY(value)：垂直方向平移。
scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者两个方向上缩放元素。
rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z轴上旋转元素。
skew()、skewX()、skewY()：在水平方向、垂直方向或者两个方向倾斜一定的角度。

animation的属性有：
animation-name,animation-delay,animation-duration,animation-direction,animation-timing-function,animation-play-state;
通过设置动画关键帧，来实现模态框的弹出效果。

CSS部分：

 .dialog-face {
        position: fixed;
        background: #cd8194;
        height: 100%;
        width: 100%;
        opacity: 0.7;
      }
    /*------弹窗布局样式----------*/
    .dialog-root{
        position: fixed;
        left: 50%;
        top: 100%;
    }
    /*弹窗容器*/
    .dialog-wrapper{
        background: #cd8194;
        width: 600px;
        height: 400px;
        overflow: hidden;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        animation: dialogSlipToUP 500ms ease 1 forwards;//结束时保留最后一帧的状态
    }
    /*弹窗内容*/
    .dialog-content{
        font-size: 1.1em;
        color:#fff;
    }
    /*透明度从0.3渐变到1并且元素从浏览器底部出现。*/
    @keyframes dialogSlipToUP {
        0%{
            opacity: 0.3;
        }
        100%{
            transform: translate(-50%,-100%);
            opacity:1;
        }
    }

HTML部分：

<div class="dialog-face">
</div>
<div class="dialog-root">
    <div class="dialog-wrapper">
        <div class="dialog-content">
            <p>This is a modal window.</p>
        </div>
    </div>
</div>