fix: 修改popup组件底部弹出没有弹入动画的bug (#670)

dpp050700 · 7insummer · commit 428b8e660c80 · 2020-01-09T17:12:13.000+08:00
diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss
@@ -1 +1 @@
-.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
+.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
diff --git a/examples/dist/popup/index.wxss b/examples/dist/popup/index.wxss
@@ -1 +1 @@
-.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
+.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
diff --git a/src/popup/index.less b/src/popup/index.less
@@ -227,6 +227,21 @@
   }
 }
 
+@keyframes popup-bottom-fadein {
+  0% {
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
+
+  }
+
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+
 @keyframes popup-bottom-fadeout {
   0% {
     transform: translate3d(0, 0, 0);

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
	`1`	+.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}