ww-购物车添加动画

pages/commodity/snacks/snacks.js

@@ -5,6 +5,7 @@ Page({
       rightTitle: '优惠套餐',
       showPopup: false,
       showAddSucc: false,
+      hideAnimation: true,
       leftMenuList: [
         {
           id: 0,
@@ -103,6 +104,12 @@ Page({
         goods_now_text: '业主价'
       }
     },
+    onLoad() {
+        this.animationDown = wx.createAnimation({
+            duration: 400,
+            timingFunction: 'ease'
+        })
+    },
     handleItemTap(e) {
       let index = e.currentTarget.dataset.index
       let rightTitle = this.data.leftMenuList[index].tab
@@ -127,10 +134,26 @@ Page({
     handleAddCart() {
         let showPopup = false
         let showAddSucc = true
+        let hideAnimation = false
+        this.animationDown.translateY(180).step()
         this.setData({
             showPopup,
-        showAddSucc
+            showAddSucc,
+            hideAnimation,
+        })
+        setTimeout(() => {
+            this.setData({
+                animationDown: this.animationDown.export()
+            })
+        })
+        setTimeout(() => {
+            this.animationDown.translateY(0).step()
+            let hideAnimation = true
+            this.setData({
+                hideAnimation,
+                animationDown: this.animationDown.export()
             })
+        }, 400)
     },
     goToCart() {
       wx.navigateTo({

pages/commodity/snacks/snacks.wxml

@@ -52,7 +52,6 @@
             <image src="../../../image/cart.png" mode="widthFix"></image>
             </view>
         </view>
-    </scroll-view>
     <!-- 购物车弹窗 -->
     <l-popup show="{{showPopup}}" content-align="center"  locked="{{true}}">
       <view class="popup-wrap">
@@ -80,5 +79,8 @@
     </l-popup>
     <!-- 添加成功 -->
     <l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
+    <!-- 加入购物车动画 -->
+    <view class="redPoint {{hideAnimation ? 'animation-hide' : ''}}" animation="{{animationDown}}"></view>
+    </scroll-view>
   </view>
 </view>
\ No newline at end of file

pages/commodity/snacks/snacks.wxss

@@ -72,6 +72,19 @@ Page {
     height: 48rpx;
 }
 
+.redPoint {
+    position: fixed;
+    right: 80rpx;
+    bottom: 560rpx;
+    width: 15px;
+    height: 15px;
+    background-color: #E66060;
+    border-radius: 50%;
+}
+.animation-hide {
+    display: none;
+}
+
 .item {
     width: 100%;
     height: 250rpx;