新增: 全局动画切换功能；

src/components/checkbox/ColorCheckbox.vue

@@ -94,7 +94,7 @@ export default {
       required: true
     },
     value: {
-      type: String,
+      type: [String, Number],
       required: true
     },
     checked: {

src/components/menu/Contextmenu.vue

@@ -64,8 +64,8 @@ export default {
   .contextmenu{
     position: fixed;
     z-index: 1;
-    border: 1px solid #9e9e9e;
+
     border-radius: 4px;
-    box-shadow: 2px 2px 10px #aaaaaa !important;
+    box-shadow: -4px 4px 16px 1px #e6e6e6 !important;
   }
 </style>

src/components/setting/Setting.vue

@@ -7,15 +7,8 @@
       </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-checkbox-group @change="onColorChange" :defaultValues="['6']" :multiple="false">
-        <color-checkbox color="#f5222d" value="1" />
-        <color-checkbox color="#fa541c" value="2" />
-        <color-checkbox color="#faad14" value="3" />
-        <color-checkbox color="#13c2c2" value="4" />
-        <color-checkbox color="#52c41a" value="5" />
-        <color-checkbox color="#1d92ff" value="6" />
-        <color-checkbox color="#2f54eb" value="7" />
-        <color-checkbox color="#722ed1" value="8" />
+      <color-checkbox-group @change="onColorChange" :defaultValues="[0]" :multiple="false">
+        <color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
       </color-checkbox-group>
     </setting-item>
     <a-divider/>
@@ -62,6 +55,22 @@
       </a-list>
     </setting-item>
     <a-divider />
+    <setting-item title="页面切换动画">
+      <a-list :split="false">
+        <a-list-item>
+          动画效果
+          <a-select v-model="animate" @change="setAnimate" class="select-item" size="small" slot="actions">
+            <a-select-option :key="index" :value="index" v-for="(item, index) in animates">{{item.alias}}</a-select-option>
+          </a-select>
+        </a-list-item>
+        <a-list-item>
+          动画方向
+          <a-select v-model="direction" @change="setAnimate" class="select-item" size="small" slot="actions">
+            <a-select-option :key="index" :value="index" v-for="(item, index) in animateCfg.directions">{{item}}</a-select-option>
+          </a-select>
+        </a-list-item>
+      </a-list>
+    </setting-item>
     <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >拷贝代码</a-button>
   </a-layout-sider>
 </template>
@@ -72,6 +81,7 @@ import ColorCheckbox from '../checkbox/ColorCheckbox'
 import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
 import themeUtil from '../../utils/themeUtil';
+import { mapState } from 'vuex'
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
@@ -79,11 +89,19 @@ const ImgCheckboxGroup = ImgCheckbox.Group
 export default {
   name: 'Setting',
   components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem},
-  computed: {
-    multiPage () {
-      return this.$store.state.setting.multiPage
+  data() {
+    return {
+      animate: 0,
+      direction: 0,
+      colors: ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1d92ff', '#2f54eb', '#722ed1'],
     }
   },
+  computed: {
+    animateCfg() {
+      return this.animates[this.animate]
+    },
+    ...mapState('setting', ['animates', 'multiPage'])
+  },
   methods: {
     onColorChange (values, colors) {
       if (colors.length > 0) {
@@ -107,6 +125,14 @@ export default {
     },
     setMultiPage (checked) {
       this.$store.commit('setting/setMultiPage', checked)
+    },
+    setAnimate() {
+      let animation = this.animates[this.animate]
+      let animate = {
+        name: animation.name,
+        direction: animation.directions[this.direction]
+      }
+      this.$store.commit('setting/setAnimate', animate)
     }
   }
 }
@@ -124,5 +150,8 @@ export default {
     .flex{
       display: flex;
     }
+    .select-item{
+      width: 80px;
+    }
   }
 </style>

src/components/transition/PageToggleTransition.vue

@@ -0,0 +1,91 @@
+<template>
+  <transition
+    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
+    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+  import {animates} from '@/config'
+
+  export default {
+    name: 'PageToggleTransition',
+    props: {
+      animate: {
+        type: String,
+        validator(value) {
+          return animates.find(item => item.name == value) != -1
+        },
+        default: 'bounce'
+      },
+      direction: {
+        type: String,
+        validator(value) {
+          return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
+            'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
+        }
+      },
+      reverse: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      enterAnimate() {
+        return this.activeClass(false)
+      },
+      leaveAnimate() {
+        return this.activeClass(true)
+      }
+    },
+    methods: {
+      activeClass(isLeave) {
+        let animate = animates.find(item => this.animate == item.name)
+        if (animate == undefined) {
+          return ''
+        }
+        let direction = ''
+        if (this.direction == undefined) {
+          direction = animate.directions[0]
+        } else {
+          direction = animate.directions.find(item => item == this.direction)
+          direction = (direction == undefined || direction === 'default') ? '' : direction
+        }
+        window.console.log(direction)
+        if (direction != '') {
+          direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
+          direction = direction[0].toUpperCase() + direction.substring(1)
+        }
+        let t = isLeave ? 'Out' : 'In'
+        return animate.name + t + direction
+      },
+      reversePosition(direction, directions) {
+        if(direction.length == 0 || direction == 'x' || direction == 'y') {
+          return direction
+        }
+        let index = directions.indexOf(direction)
+        index = (index % 2 == 1) ? index - 1 : index + 1
+        return directions[index]
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .page-toggle-enter-active{
+    position: absolute !important;
+    animation-duration: 0.6s !important;
+    width: calc(100% - 48px);
+  }
+  .page-toggle-leave-active{
+    position: absolute !important;
+    animation-duration: 0.6s !important;
+    width: calc(100% - 48px);
+  }
+  .page-toggle-enter{
+  }
+  .page-toggle-leave-to{
+  }
+</style>