feat: add the configuration of disable animation; :star2: 新增：禁用页面切换动画的功能；

iczer

2020-07-10 9d5c1009607acd9a3e81049c1dcf3ed1f6460ef2

feat: add the configuration of disable animation; :star2:
新增：禁用页面切换动画的功能；

 src/components/setting/Setting.vue

@@ -68,6 +68,10 @@
    <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
            :value="animate.name"
@@ -139,17 +143,17 @@
        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 @@
      },
      animate: {
        title: '页面切换动画',
        disable: '禁用动画',
        effect: '动画效果',
        direction: '动画方向'
      },
@@ -62,6 +63,7 @@
      },
      animate: {
        title: '頁面切換動畫',
        disable: '禁用動畫',
        effect: '動畫效果',
        direction: '動畫方向'
      },
@@ -96,6 +98,7 @@
      },
      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`"
    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
    :enter-active-class="disabled ? 'animate-disabled' : `animated ${enterAnimate} page-toggle-enter-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 @@
  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>