toast弹出框效果

Posted 2021-01-25 mk2016

js代码

 1 //toast弹出框
 2 var layerTime;
 3 function layer(txt, time) {    
 4     clearTimeout(layerTime);
 5     var times = time || 2000;
 6     $(".layer_wrap").remove();
 7     $("body").append(‘<div id="layer_wrap" class="layer_wrap"></div>‘);
 8     $(".layer_wrap").append(‘<p id="layer" class="layer sct">‘ + txt + "</p>");
 9     var o = $(".layer").height();
10     var p = $(".layer").width();
11     $(".layer_wrap").css({
12         "margin-top": -o / 2
13     });
14     layerTime = setTimeout(function() {
15         $(".sct").removeClass("layer").addClass("unlayer");
16         $(".sct").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){
17             $(".layer_wrap").remove();
18         });
19     },
20     times)
21 }

css 代码

 1 @keyframes ss {
 2     0% {
 3         opacity: 0;
 4         -webkit-transform: scale(.5);
 5         -ms-transform: scale(.5);
 6         transform: scale(.5)
 7     }
 8 
 9     100% {
10         opacity: 1;
11         -webkit-transform: scale(1);
12         -ms-transform: scale(1);
13         transform: scale(1)
14     }
15 }
16 
17 @keyframes sss {
18     0% {
19         opacity: 1;
20         -webkit-transform: scale(1);
21         -ms-transform: scale(1);
22         transform: scale(1)
23     }
24 
25     100% {
26         opacity: 0;
27         -webkit-transform: scale(.5);
28         -ms-transform: scale(.5);
29         transform: scale(.5)
30     }
31 }
32 
33 .layer_wrap {
34     position: fixed;
35     width: 9rem;
36     top: 50%;
37     left: 50%;
38     margin-left: -4.5rem;
39     margin-top: -1rem;
40     text-align: center;
41     z-index: 9999999;
42 }
43 
44 .layer {
45     min-width: 3rem;
46     background-color: rgba(0,0,0,.6);
47     border-radius: 8px;
48     display: inline-block;
49     color: #fff;
50     font-size: .32rem;
51     text-align: center;
52     line-height: .4rem;
53     padding: .3rem .6rem;
54     word-break: break-all;
55     animation-name: ss;
56     animation-duration: .3s;
57     animation-timing-function: ease;
58     animation-fill-mode: both;
59     -ms-animation-name: ss;
60     -ms-animation-duration: .3s;
61     -ms-animation-timing-function: ease;
62     -ms-animation-fill-mode: both;
63     -webkit-animation-name: ss;
64     -webkit-animation-duration: .3s;
65     -webkit-animation-timing-function: ease;
66     -webkit-animation-fill-mode: both
67 }
68 
69 .unlayer {
70     background-color: rgba(0,0,0,.6);
71     border-radius: 8px;
72     display: inline-block;
73     color: #fff;
74     font-size: .32rem;
75     text-align: center;
76     line-height: .4rem;
77     padding: .3rem .6rem;
78     word-break: break-all;
79     animation-name: sss;
80     animation-duration: .2s;
81     animation-timing-function: ease;
82     animation-fill-mode: both;
83     -ms-animation-name: sss;
84     -ms-animation-duration: .2s;
85     -ms-animation-timing-function: ease;
86     -ms-animation-fill-mode: both;
87     -webkit-animation-name: sss;
88     -webkit-animation-duration: .2s;
89     -webkit-animation-timing-function: ease;
90     -webkit-animation-fill-mode: both
91 }