no message

quasar.conf.js

@@ -146,7 +146,7 @@ module.exports = configure(function (ctx) {
 
     animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: ['bounceInLeft', 'bounceOutRight'],
+    animations: ['bounceInLeft', 'bounceOutRight','fadeInLeft','fadeInRight','fadeInDown','fadeInUp'],
 
     // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {

src/components/passbook/rebate.vue

@@ -14,39 +14,45 @@
                 size="25px"
             />
             </div>
-            <div class="column col rebate-left fz14"
-            :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
-                <template v-if="isShow||$q.platform.is.desktop">
-                <div class="row items-center left-text text-grey-9"
-                :class="[$q.platform.is.desktop?'':'q-py-sm active']">
-                    <div>{{$t('v104.passbook.col.title1')}}{{$q.platform.is.desktop?$t('v104.passbook.col.title01'):''}}</div><div>{{$t('v104.passbook.col.title2')}}</div>
-                    <div>{{$t('v104.passbook.col.title3')}}</div><div>{{$t('v104.passbook.col.title4')}}</div>
-                </div>
-                <q-separator color="grey-3" />
-                <div class="column" v-if="dataList.length>0">
-                    <div 
-                    v-for="(item,index) in dataList"
-                    class="row items-center left-text text-dark">
-                        <div>{{item.id}}</div>
-                        <div>{{item.teamSeries}}</div>
-                        <div>{{item.peopleNum}}</div>
-                        <div><span :class="{'text-red':item.money>0}"><template v-if="item.money>0">+</template> ¥{{item.money}}</span></div>
+            <transition
+            v-if="isShow||$q.platform.is.desktop"
+              appear
+              enter-active-class="animated fadeInUp"
+              leave-active-class="animated fadeInDown"
+            >
+                <div class="column col rebate-left fz14"
+                :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
+                    <div class="row items-center left-text text-grey-9"
+                    :class="[$q.platform.is.desktop?'':'q-py-sm active']">
+                        <div>{{$t('v104.passbook.col.title1')}}{{$q.platform.is.desktop?$t('v104.passbook.col.title01'):''}}</div><div>{{$t('v104.passbook.col.title2')}}</div>
+                        <div>{{$t('v104.passbook.col.title3')}}</div><div>{{$t('v104.passbook.col.title4')}}</div>
                     </div>
+                    <q-separator color="grey-3" />
+                    <div class="column" v-if="dataList.length>0">
+                        <div 
+                        v-for="(item,index) in dataList"
+                        class="row items-center left-text text-dark">
+                            <div>{{item.id}}</div>
+                            <div>{{item.teamSeries}}</div>
+                            <div>{{item.peopleNum}}</div>
+                            <div><span :class="{'text-red':item.money>0}"><template v-if="item.money>0">+</template> ¥{{item.money}}</span></div>
+                        </div>
+                    </div>
+                    <div class="text-center q-pb-lg"
+                    v-else style="height: 300px;line-height: 200px;">
+                        <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
+                        <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
+                    </div>
+                    
                 </div>
-                <div class="text-center q-pb-lg"
-                v-else style="height: 300px;line-height: 200px;">
-                    <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
-                    <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
-                </div>
-                </template>
-            </div>
+            </transition>
             <div class="rebate-right column"
             :class="[$q.platform.is.desktop?'col-4 q-px-lg':'col']"
             :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
                 <div class="fz14 text-grey-7"
                 :class="[$q.platform.is.desktop?'':'q-pl-md']">{{$t('v104.passbook.titles.text2')}}</div>
                 <div :class="[$q.platform.is.desktop?'q-pl-lg':'']">
-                   <div ref="main" style="width: 100%;height: 300px;"></div> 
+                <div ref="main" style="width: 100%;height: 300px;"></div> 
                 </div>
             </div>
         </div>

src/pages/passbook/passbook.vue

@@ -3,12 +3,24 @@
         <div class="q-mt-sm q-mb-lg"
         :class="[$q.platform.is.desktop?'passbook-form':'']"
         :style="{'width':$q.platform.is.mobile?'100%':''}">
-          <template v-if="!isUseDetails">
-            <passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/>
-            <rebate />
-            <redEnvelope v-if="MonthObj&&datainfo" :Obj="MonthObj" :info="datainfo"/>
-          </template>
-          <useDetails v-else/>
+          <transition-group
+              v-if="!isUseDetails"
+              appear
+              enter-active-class="animated fadeInRight"
+              leave-active-class="animated fadeInLeft"
+            >
+              <passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/>
+              <rebate />
+              <redEnvelope v-if="MonthObj&&datainfo" :Obj="MonthObj" :info="datainfo"/>
+          </transition-group>
+          <transition
+            v-else
+            appear
+            enter-active-class="animated fadeInLeft"
+            leave-active-class="animated fadeInRight"
+          >
+            <useDetails/>
+          </transition>
         </div>
     </div>
 </template>