boots animation

@@ -17,13 +17,14 @@ Component({
    */
   data: {
     disp:false,
+    animation:'',
     background:[{
       url:'http://nosqn.colorcun.com/boots/1.png',
       txt:'1.戳选地图上的商家，开始预订',
     },{
       url:'http://nosqn.colorcun.com/boots/3.png',
       txt:'2.搜索商家或位置，开始预订',
-    }]
+    }],
   },
 
   /**
@@ -37,6 +38,11 @@ Component({
           this.setData({
             disp:true,
           })
+          setTimeout(()=>{
+            this.setData({
+              animation:'discountShow',
+            })
+          },300)
           this.triggerEvent('event',{act:'show',txt:'新用户'})
           //wx.setStorage({key:cacheKey, data:new Date().toISOString()})
         },
@@ -47,9 +53,29 @@ Component({
     },
     hide(){
       this.setData({
-        disp:false,
+        animation:'discountHide',
       })
       this.triggerEvent('event',{act:'hide',txt:'新用户'})
+      setTimeout(()=>{
+        this.setData({
+          disp:false,
+        })
+      },300)
+    },
+    hasGoto:false,
+    bindtransition(e){
+      console.log(e)
+      if('change'==e.type){
+        this.hasGoto=false
+      }
+      if('animationfinish'==e.type){
+        if(this.hasGoto && (e.detail.current+1)==2){
+          this.hide()
+          return;
+        }else{
+          this.hasGoto=true
+        }
+      }
     },
   }
 })

 <!--components/tips/boost.wxml-->
 <view class="mask" bindtap="hide" wx:if="{{disp}}" style="z-index: 99999">
-    <view class="boost" catchtap="catchtap">
+    <view class="boost {{animation}}" catchtap="catchtap" wx:if="{{animation}}">
         <view class="header flex-lr" bindtap="hide">
             <view> </view>
             <view class="title">操作指引</view>
             <view class="close"></view>
         </view>
         <view class="content">
-            <swiper indicator-dots style="height:496rpx;">
+            <swiper indicator-dots
+                    bindchange="bindtransition" bindanimationfinish="bindtransition"
+                    style="height:496rpx;">
                 <block wx:for="{{background}}" wx:key="*this">
                     <swiper-item style="text-align: center">
                         <image src="{{item.url}}" class="swiper-image"></image>

 /* components/tips/boost.wxss */
 @import "../../app.wxss";
+@keyframes discountShow
+{
+    from {bottom: -738rpx;}
+    to {bottom: 0rpx;}
+}
+@keyframes discountHide
+{
+    from {bottom: 0rpx;}
+    to {bottom: -738rpx;}
+}
 .boost{
     width:100%;
     height:738rpx;
@@ -10,6 +20,13 @@
     position: fixed;
     bottom: 0;
 }
+.boost.discountShow{
+    animation: discountShow 0.6s;
+}
+.boost.discountHide{
+    animation: discountHide 0.6s;
+    bottom: -738rpx;
+}
 .title{
     height:42rpx;
     font-size:30rpx;

@@ -351,6 +351,9 @@ Page({
         //this.timeoutGetMarkers();
       },
     })
+    this.setData({
+      hasBoost:true,
+    })
   },
   hasMarkertap:false,
   markertap(e,flag=true){

@@ -143,4 +143,4 @@
        bindactive="caixiActive" id="caixi"
 ></caixi>
 <activity-enter hasInHome wx:if="{{hasGetPos}}"></activity-enter>
-<boost bindevent="boostEvent"></boost>
\ No newline at end of file
+<boost bindevent="boostEvent" wx:if="{{hasBoost}}"></boost>
\ No newline at end of file