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,9 +14,14 @@
                 size="25px"
             />
             </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':''}">
-                <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>
@@ -38,8 +43,9 @@
                         <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':''}">

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">
+          <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"/>
-          </template>
-          <useDetails v-else/>
+          </transition-group>
+          <transition
+            v-else
+            appear
+            enter-active-class="animated fadeInLeft"
+            leave-active-class="animated fadeInRight"
+          >
+            <useDetails/>
+          </transition>
         </div>
     </div>
 </template>