feat: add the configuration of disable animation; 🌟

新增：禁用页面切换动画的功能；

src/components/setting/Setting.vue

@@ -67,6 +67,10 @@
     <a-divider />
     <setting-item :title="$t('animate.title')">
       <a-list :split="false">
+        <a-list-item>
+          {{$t('animate.disable')}}
+          <a-switch :checked="animate.disabled" slot="actions" size="small" @change="val => setAnimate({...animate, disabled: val})" />
+        </a-list-item>
         <a-list-item>
           {{$t('animate.effect')}}
           <a-select
@@ -139,17 +143,17 @@ export default {
         const dftValue = setting[key], myValue = mySetting[key]
         // 只提取与默认配置不同的配置项
         if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
-          console.log(myValue)
           config[key] = myValue
         }
       })
-      this.copyConfig = '// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可\n'
+      this.copyConfig = '// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可\n'
       this.copyConfig += 'module.exports = '
       this.copyConfig += formatConfig(config)
+
       let clipboard = new Clipboard('#copyBtn')
       const _this = this
       clipboard.on('success', function () {
-        _this.$message.success(`复制成功`)
+        _this.$message.success(`复制成功，覆盖文件 src/config/config.js 然后重启项目即可生效`)
         clipboard.destroy()
       })
     },

src/components/setting/i18n.js

@@ -28,6 +28,7 @@ module.exports = {
       },
       animate: {
         title: '页面切换动画',
+        disable: '禁用动画',
         effect: '动画效果',
         direction: '动画方向'
       },
@@ -62,6 +63,7 @@ module.exports = {
       },
       animate: {
         title: '頁面切換動畫',
+        disable: '禁用動畫',
         effect: '動畫效果',
         direction: '動畫方向'
       },
@@ -96,6 +98,7 @@ module.exports = {
       },
       animate: {
         title: 'Page Toggle Animation',
+        disable: 'Disable',
         effect: 'Effect',
         direction: 'Direction'
       },

src/components/transition/PageToggleTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <transition
-    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
+    :enter-active-class="disabled ? 'animate-disabled' : `animated ${enterAnimate} page-toggle-enter-active`"
-    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
+    :leave-active-class="disabled ? 'animate-disabled' : `animated ${leaveAnimate} page-toggle-leave-active`"
   >
     <slot></slot>
   </transition>
@@ -13,6 +13,10 @@
   export default {
     name: 'PageToggleTransition',
     props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       animate: {
         type: String,
         validator(value) {

src/config/config.js

@@ -1,4 +1,4 @@
-// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
+// 自定义配置，参考 ./default/setting.config.js，需要自定义的属性在这里配置即可
 module.exports = {
   theme: {
     color: '#13c2c2',

src/config/default/setting.config.js

@@ -14,6 +14,7 @@ module.exports = {
   systemName: 'Vue Antd Admin',         //系统名称
   copyright: '2018 ICZER 工作室出品',    //copyright
   animate: {                            //动画设置
+    disabled: false,                    //禁用动画，true:禁用，false:启用
     name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js
     direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animate.config.js
   },

src/layouts/BlankView.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-toggle-transition :animate="animate.name" :direction="animate.direction">
+  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
     <keep-alive v-if="multiPage">
       <router-view />
     </keep-alive>

src/layouts/PageView.vue

@@ -3,7 +3,7 @@
     <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
       <img :src="extraImage"/>
     </div>
-    <page-toggle-transition :animate="animate.name" :direction="animate.direction">
+    <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
       <keep-alive v-if="multiPage">
         <router-view ref="page" />
       </keep-alive>

src/layouts/TabsView.vue

@@ -15,7 +15,7 @@
       </a-tab-pane>
     </a-tabs>
     <div class="tabs-view-content">
-      <page-toggle-transition :animate="animate.name" :direction="animate.direction">
+      <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
         <keep-alive v-if="multiPage">
           <router-view />
         </keep-alive>