Browse Source

优化购物车小球动画效果

shenjj 7 năm trước cách đây
mục cha
commit
bfcfe02245
1 tập tin đã thay đổi với 9 bổ sung3 xóa
  1. 9 3
      components/default/RightBar.vue

+ 9 - 3
components/default/RightBar.vue

@@ -190,7 +190,12 @@
             let x = -(rect.right - rect.left + 56)
             // window.innerHeight * 0.6 - rect.top - rect.height
             let y = -(window.innerHeight * 0.6 - rect.top)
-            el.style.display = '';
+            el.style.display = ''
+            if (y > 0) {
+              el.style.transition = 'all 0.4s cubic-bezier(0,.79,.66,1.42)'
+            } else {
+              el.style.transition = 'all 0.4s cubic-bezier(0.49,-0.29,0.75, 0.14)'
+            }
             el.style.webkitTransform = `translate3d(0, ${y}px,0)`
             el.style.transform = `translate3d(0, ${y}px,0)`
             let inner = el.getElementsByClassName('inner-hook')[0]
@@ -659,9 +664,10 @@ i {
 .ball {
   position: fixed;
   right: 0;
-  top: 60%;
+  top: 56%;
   z-index: 200;
-  transition: all 0.4s cubic-bezier(0.49,-0.29,0.75, 0.14);
+  transition: all 0.4s cubic-bezier(0.49,-0.29,0.75, 0.14)
+  /*transition: all 0.4s cubic-bezier(0,.79,.66,1.42);*/
 }
 .ball .inner {
   width: 16px;