修改css

Author: lin-xin

lib/toast.css

@@ -2,7 +2,8 @@
     position: fixed;
     bottom: 100px;
     left: 50%;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     max-width: 80%;
     height: 40px;
     line-height: 20px;
@@ -39,16 +40,21 @@
     bottom: inherit;
 }
 
+@-webkit-keyframes show-toast {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 @keyframes show-toast {
     from {
         opacity: 0;
-        transform: translate(-50%, -10px);
-        -webkit-transform: translate(-50%, -10px);
     }
     to {
         opacity: 1;
-        transform: translate(-50%, 0);
-        -webkit-transform: translate(-50%, 0);
     }
 }
 
@@ -99,7 +105,8 @@
     width: 9.14px;
     height: 3.08px;
     background: #d1d1d5;
-    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
+            box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
     border-radius: 1px;
     -webkit-transform-origin: left 50% 0px;
     transform-origin: left 50% 0px;
@@ -243,6 +250,24 @@
     }
 }
 
+@keyframes opacity-0 {
+    0% {
+        opacity: 0.25;
+    }
+    0.01% {
+        opacity: 0.25;
+    }
+    0.02% {
+        opacity: 1;
+    }
+    60.01% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.25;
+    }
+}
+
 @-webkit-keyframes opacity-1 {
     0% {
         opacity: 0.25;
@@ -261,6 +286,24 @@
     }
 }
 
+@keyframes opacity-1 {
+    0% {
+        opacity: 0.25;
+    }
+    8.34333% {
+        opacity: 0.25;
+    }
+    8.35333% {
+        opacity: 1;
+    }
+    68.3433% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.25;
+    }
+}
+
 @-webkit-keyframes opacity-2 {
     0% {
         opacity: 0.25;
@@ -279,6 +322,24 @@
     }
 }
 
+@keyframes opacity-2 {
+    0% {
+        opacity: 0.25;
+    }
+    16.6767% {
+        opacity: 0.25;
+    }
+    16.6867% {
+        opacity: 1;
+    }
+    76.6767% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.25;
+    }
+}
+
 @-webkit-keyframes opacity-3 {
     0% {
         opacity: 0.25;
@@ -297,6 +358,24 @@
     }
 }
 
+@keyframes opacity-3 {
+    0% {
+        opacity: 0.25;
+    }
+    25.01% {
+        opacity: 0.25;
+    }
+    25.02% {
+        opacity: 1;
+    }
+    85.01% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.25;
+    }
+}
+
 @-webkit-keyframes opacity-4 {
     0% {
         opacity: 0.25;
@@ -315,6 +394,24 @@
     }
 }
 
+@keyframes opacity-4 {
+    0% {
+        opacity: 0.25;
+    }
+    33.3433% {
+        opacity: 0.25;
+    }
+    33.3533% {
+        opacity: 1;
+    }
+    93.3433% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.25;
+    }
+}
+
 @-webkit-keyframes opacity-5 {
     0% {
         opacity: 0.270958333333333;
@@ -333,6 +430,24 @@
     }
 }
 
+@keyframes opacity-5 {
+    0% {
+        opacity: 0.270958333333333;
+    }
+    41.6767% {
+        opacity: 0.25;
+    }
+    41.6867% {
+        opacity: 1;
+    }
+    1.67667% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.270958333333333;
+    }
+}
+
 @-webkit-keyframes opacity-6 {
     0% {
         opacity: 0.375125;
@@ -351,6 +466,24 @@
     }
 }
 
+@keyframes opacity-6 {
+    0% {
+        opacity: 0.375125;
+    }
+    50.01% {
+        opacity: 0.25;
+    }
+    50.02% {
+        opacity: 1;
+    }
+    10.01% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.375125;
+    }
+}
+
 @-webkit-keyframes opacity-7 {
     0% {
         opacity: 0.479291666666667;
@@ -369,6 +502,24 @@
     }
 }
 
+@keyframes opacity-7 {
+    0% {
+        opacity: 0.479291666666667;
+    }
+    58.3433% {
+        opacity: 0.25;
+    }
+    58.3533% {
+        opacity: 1;
+    }
+    18.3433% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.479291666666667;
+    }
+}
+
 @-webkit-keyframes opacity-8 {
     0% {
         opacity: 0.583458333333333;
@@ -387,6 +538,24 @@
     }
 }
 
+@keyframes opacity-8 {
+    0% {
+        opacity: 0.583458333333333;
+    }
+    66.6767% {
+        opacity: 0.25;
+    }
+    66.6867% {
+        opacity: 1;
+    }
+    26.6767% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.583458333333333;
+    }
+}
+
 @-webkit-keyframes opacity-9 {
     0% {
         opacity: 0.687625;
@@ -405,6 +574,24 @@
     }
 }
 
+@keyframes opacity-9 {
+    0% {
+        opacity: 0.687625;
+    }
+    75.01% {
+        opacity: 0.25;
+    }
+    75.02% {
+        opacity: 1;
+    }
+    35.01% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.687625;
+    }
+}
+
 @-webkit-keyframes opacity-10 {
     0% {
         opacity: 0.791791666666667;
@@ -423,6 +610,24 @@
     }
 }
 
+@keyframes opacity-10 {
+    0% {
+        opacity: 0.791791666666667;
+    }
+    83.3433% {
+        opacity: 0.25;
+    }
+    83.3533% {
+        opacity: 1;
+    }
+    43.3433% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.791791666666667;
+    }
+}
+
 @-webkit-keyframes opacity-11 {
     0% {
         opacity: 0.895958333333333;
@@ -439,4 +644,22 @@
     100% {
         opacity: 0.895958333333333;
     }
+}
+
+@keyframes opacity-11 {
+    0% {
+        opacity: 0.895958333333333;
+    }
+    91.6767% {
+        opacity: 0.25;
+    }
+    91.6867% {
+        opacity: 1;
+    }
+    51.6767% {
+        opacity: 0.25;
+    }
+    100% {
+        opacity: 0.895958333333333;
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-toast",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A mobile toast plugin for vue2.",
   "keywords":["vue.js","vue-plugin","toast"],
   "main": "lib/index.js",