修改: 调整布局，解决全局动画导致的界面抖动问题；

src/components/exception/ExceptionPage.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="exception">
+  <div class="exception-page" :style="{minHeight: layoutMinHeight - 64 + 'px'}">
     <div class="img">
       <img :src="config[type].img" />
-      <!--<div class="ele" :style="{backgroundImage: `url(${config[type].img})`}"/>-->
     </div>
     <div class="content">
       <h1>{{config[type].title}}</h1>
@@ -24,17 +23,18 @@ export default {
     return {
       config: Config
     }
-  }
+  },
+  inject: ['layoutMinHeight']
 }
 </script>
 
 <style lang="less" scoped>
-  .exception{
-    min-height: 500px;
-    height: 80%;
+  .exception-page{
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
     align-items: center;
-    text-align: center;
-    margin-top: 150px;
+    background-color: white;
     .img{
       display: inline-block;
       padding-right: 52px;
@@ -46,7 +46,6 @@ export default {
     }
     .content{
       display: inline-block;
-      flex: auto;
       h1{
         color: #434e59;
         font-size: 72px;

src/components/setting/Setting.vue

@@ -7,7 +7,7 @@
       </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-checkbox-group @change="onColorChange" :defaultValues="[0]" :multiple="false">
+      <color-checkbox-group @change="onColorChange" :defaultValues="[5]" :multiple="false">
         <color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
       </color-checkbox-group>
     </setting-item>
@@ -96,6 +96,11 @@ export default {
       colors: ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1d92ff', '#2f54eb', '#722ed1'],
     }
   },
+  watch: {
+    animate(){
+      this.direction = 0
+    }
+  },
   computed: {
     animateCfg() {
       return this.animates[this.animate]

src/components/transition/PageToggleTransition.vue

@@ -51,9 +51,8 @@
           direction = animate.directions[0]
         } else {
           direction = animate.directions.find(item => item == this.direction)
-          direction = (direction == undefined || direction === 'default') ? '' : direction
         }
-        window.console.log(direction)
+        direction = (direction == undefined || direction === 'default') ? '' : direction
         if (direction != '') {
           direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
           direction = direction[0].toUpperCase() + direction.substring(1)