From 5eb201b25b5f4d146076d8e9d79293ef57d83f17 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Wed, 9 Aug 2023 16:43:59 +0800 Subject: [PATCH] v4.1.6 --- .vscode/settings.json | 3 +- CHANGELOG.md | 13 ++++ package.json | 2 +- postcss.config.cjs | 41 +++++----- .../provider/AppRequestCanceler/index.tsx | 2 +- src/appConfig/appConfig.ts | 2 +- src/appConfig/routerConfig.ts | 2 +- src/components/RayChart/index.scss | 1 + src/components/RayChart/index.tsx | 12 ++- .../{ => components/SiderBarLogo}/index.scss | 4 +- .../Menu/components/SiderBarLogo/index.tsx | 74 +++++++++++++++++++ src/layout/components/Menu/index.tsx | 56 ++++---------- src/layout/components/MenuTag/index.scss | 1 + src/layout/components/MenuTag/index.tsx | 4 +- .../SiderBar/components/Breadcrumb/index.tsx | 2 +- .../components/SettingDrawer/index.tsx | 37 +++++++++- src/layout/default/ContentWrapper/index.tsx | 11 ++- src/layout/default/FeatureWrapper/index.tsx | 24 ++++++ src/layout/default/FooterWrapper/index.scss | 2 +- src/layout/default/HeaderWrapper/index.tsx | 29 ++++++++ src/layout/index.scss | 2 +- src/layout/index.tsx | 18 +++-- .../lang/en-US/headerSettingOptions.json | 3 +- .../lang/zh-CN/headerSettingOptions.json | 3 +- src/router/README.md | 1 - src/store/modules/setting/index.ts | 7 ++ src/store/modules/setting/type.ts | 1 + src/styles/animate.scss | 61 +++++++++++++-- vite.config.ts | 2 +- 29 files changed, 320 insertions(+), 100 deletions(-) rename src/layout/components/Menu/{ => components/SiderBarLogo}/index.scss (93%) create mode 100644 src/layout/components/Menu/components/SiderBarLogo/index.tsx create mode 100644 src/layout/default/FeatureWrapper/index.tsx create mode 100644 src/layout/default/HeaderWrapper/index.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 0efef4d5..93251d2d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,5 +8,6 @@ "i18n-ally.sourceLanguage": "zh-CN", "i18n-ally.displayLanguage": "zh-CN", "i18n-ally.enabledFrameworks": ["vue", "react"], - "typescript.tsdk": "node_modules/typescript/lib" + "typescript.tsdk": "node_modules/typescript/lib", + "synthwave84.disableGlow": true } diff --git a/CHANGELOG.md b/CHANGELOG.md index 982fbacd..af49a10d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # CHANGE LOG +## 4.1.6 + +### Feats + +- 现在支持切换内容区域的过渡动画效果 +- 优化了一些布局的样式细节 +- 将过渡动画与 Spin 动画结合 +- 拆分了布局组件，使得它看起来更合理 + +### Fixes + +- 修复 RayChart 组件不能根据内容区域尺寸变化更新 chart 图 + ## 4.1.5 ### Fixes diff --git a/package.json b/package.json index c3212bc7..da89c127 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "husky": "^8.0.3", "lint-staged": "^13.1.0", "postcss": "^8.1.0", - "postcss-px-to-viewport-update": "1.2.0", + "postcss-px-to-viewport-8-plugin": "1.2.2", "prettier": "^2.7.1", "rollup-plugin-visualizer": "^5.8.3", "svg-sprite-loader": "^6.0.11", diff --git a/postcss.config.cjs b/postcss.config.cjs index 67c71ae0..b5f63577 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -11,25 +11,26 @@ module.exports = { ], grid: true, }, - // 由于该库的作者很久没更新了，导致 exclude include 并没有生效，所以使用的是其一个 fork 版本 - // 'postcss-px-to-viewport-update': { - // inlinePxToViewport: true, - // /** 视窗的宽度(设计稿的宽度) */ - // viewportWidth: 1920, - // /** 视窗的高度(设计稿高度, 一般无需指定) */ - // viewportHeight: 1080, - // /** 指定 px 转换为视窗单位值的小数位数 */ - // unitPrecision: 3, - // /** 指定需要转换成的视窗单位 */ - // viewportUnit: 'vw', - // /** 指定不转换为视窗单位的类 */ - // selectorBlackList: ['.ignore'], - // /** 小于或等于 1px 不转换为视窗单位 */ - // minPixelValue: 1, - // /** 允许在媒体查询中转换 px */ - // mediaQuery: false, - // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 - // include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/], - // }, + // 为了适配 postcss8.x 版本的转换库 + 'postcss-px-to-viewport-8-plugin': { + inlinePxToViewport: true, + /** 视窗的宽度(设计稿的宽度) */ + viewportWidth: 1920, + /** 视窗的高度(设计稿高度, 一般无需指定) */ + viewportHeight: 1080, + /** 指定 px 转换为视窗单位值的小数位数 */ + unitPrecision: 3, + /** 指定需要转换成的视窗单位 */ + viewportUnit: 'rem', + /** 指定不转换为视窗单位的类 */ + selectorBlackList: ['.ignore'], + /** 小于或等于 1px 不转换为视窗单位 */ + minPixelValue: 1, + /** 允许在媒体查询中转换 px */ + mediaQuery: false, + // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 + include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/], + preserve: true, + }, }, } diff --git a/src/app-components/provider/AppRequestCanceler/index.tsx b/src/app-components/provider/AppRequestCanceler/index.tsx index b3459e21..44f177d9 100644 --- a/src/app-components/provider/AppRequestCanceler/index.tsx +++ b/src/app-components/provider/AppRequestCanceler/index.tsx @@ -14,7 +14,7 @@ * 路由更新前，取消上一路由所有请求 * * 生命周期示意图： - * beforeRouteUpdate -> cancelAllRequest -> routerUpdate + * beforeRouteUpdate -> cancelAllRequest -> routeUpdate */ import { axiosCanceler } from '@/axios/helper/interceptor' diff --git a/src/appConfig/appConfig.ts b/src/appConfig/appConfig.ts index 992e827c..a99f7ec7 100644 --- a/src/appConfig/appConfig.ts +++ b/src/appConfig/appConfig.ts @@ -61,7 +61,7 @@ export const ROOT_ROUTE: Readonly = { * * 如果不设置该属性或者为空, 则不会渲染 LOGO */ -export const SIDE_BAR_LOGO: LayoutSideBarLogo = { +export const SIDE_BAR_LOGO: LayoutSideBarLogo | undefined = { icon: 'ray', title: 'Ray Template', url: '/dashboard', diff --git a/src/appConfig/routerConfig.ts b/src/appConfig/routerConfig.ts index 5f85c035..cb7c933b 100644 --- a/src/appConfig/routerConfig.ts +++ b/src/appConfig/routerConfig.ts @@ -28,7 +28,7 @@ import type { LayoutInst } from 'naive-ui' * }) * ``` */ -export const LAYOUT_CONTENT_REF = ref() +export const LAYOUT_CONTENT_REF = ref(null) export const SETUP_ROUTER_ACTION = { /** 是否启用路由切换时顶部加载条 */ diff --git a/src/components/RayChart/index.scss b/src/components/RayChart/index.scss index 9205e373..5ea9021d 100644 --- a/src/components/RayChart/index.scss +++ b/src/components/RayChart/index.scss @@ -4,4 +4,5 @@ border: none; outline: none; box-sizing: border-box; + transition: width 0.35s var(--r-bezier); } diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index cc26a56d..fcce942c 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -43,6 +43,7 @@ import { cloneDeep, throttle } from 'lodash-es' import { on, off, completeSize } from '@/utils/element' import { call } from '@/utils/vue/index' import { setupChartTheme, loadingOptions } from './helper' +import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig' import type { PropType } from 'vue' import type { EChartsInstance } from '@/types/modules/component' @@ -53,6 +54,7 @@ import type { AutoResize, ChartTheme, } from '@/components/RayChart/type' +import type { UseResizeObserverReturn } from '@vueuse/core' export type EChartsExtensionInstallRegisters = typeof CanvasRenderer @@ -186,6 +188,7 @@ const RayChart = defineComponent({ const echartInstanceRef = ref() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题 let echartInstance: EChartsInstance // `echart` 实例 let resizeThrottle: DebouncedFunc // resize 防抖方法实例 + let resizeOvserverReturn: UseResizeObserverReturn | undefined const cssVarsRef = computed(() => { const cssVars = { @@ -431,10 +434,16 @@ const RayChart = defineComponent({ /** 注册事件 */ if (props.autoResize) { - resizeThrottle = throttle(resizeChart, 1000) + resizeThrottle = throttle(resizeChart, 500) on(window, 'resize', resizeThrottle) } + + /** 监听内容区域尺寸变化更新 chart */ + resizeOvserverReturn = useResizeObserver( + LAYOUT_CONTENT_REF.value as unknown as Ref, + resizeThrottle, + ) }) }) @@ -445,6 +454,7 @@ const RayChart = defineComponent({ off(window, 'resize', resizeThrottle) /** 注销防抖 */ resizeThrottle.cancel() + resizeOvserverReturn?.stop?.() }) expose({ diff --git a/src/layout/components/Menu/index.scss b/src/layout/components/Menu/components/SiderBarLogo/index.scss similarity index 93% rename from src/layout/components/Menu/index.scss rename to src/layout/components/Menu/components/SiderBarLogo/index.scss index b4d90627..7f1faa3a 100644 --- a/src/layout/components/Menu/index.scss +++ b/src/layout/components/Menu/components/SiderBarLogo/index.scss @@ -2,7 +2,7 @@ * * @author Ray * - * @date 2023-01-06 + * @date 2023-08-08 * * @workspace ray-template * @@ -10,7 +10,7 @@ */ .ray-menu__logo { - height: 50px; + height: $layoutHeaderHeight; padding: 0 18px 0 24px; display: flex; flex-wrap: nowrap; diff --git a/src/layout/components/Menu/components/SiderBarLogo/index.tsx b/src/layout/components/Menu/components/SiderBarLogo/index.tsx new file mode 100644 index 00000000..656a34bd --- /dev/null +++ b/src/layout/components/Menu/components/SiderBarLogo/index.tsx @@ -0,0 +1,74 @@ +/** + * + * @author Ray + * + * @date 2023-08-08 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import './index.scss' + +import { NEllipsis } from 'naive-ui' +import RayIcon from '@/components/RayIcon/index' + +const SiderBarLogo = defineComponent({ + name: 'SiderBarLogo', + props: { + collapsed: { + type: Boolean, + required: true, + }, + }, + setup() { + const router = useRouter() + + const { + layout: { sideBarLogo }, + } = __APP_CFG__ + + const handleSideBarLogoClick = () => { + if (sideBarLogo && sideBarLogo.url) { + sideBarLogo.jumpType === 'station' + ? router.push(sideBarLogo.url) + : window.open(sideBarLogo.url) + } + } + + return { + sideBarLogo, + handleSideBarLogoClick, + } + }, + render() { + return this.sideBarLogo?.icon && this.sideBarLogo?.title ? ( +
+ {this.sideBarLogo?.icon ? ( + + ) : ( + '' + )} +

+ {this.sideBarLogo?.title} +

+
+ ) : ( + '' + ) + }, +}) + +export default SiderBarLogo diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx index 027de23f..f1ee7041 100644 --- a/src/layout/components/Menu/index.tsx +++ b/src/layout/components/Menu/index.tsx @@ -1,11 +1,19 @@ -import './index.scss' +/** + * + * @author Ray + * + * @date 2022-10-11 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ -import { NMenu, NLayoutSider, NEllipsis } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' +import { NMenu, NLayoutSider } from 'naive-ui' +import SiderBarLogo from './components/SiderBarLogo/index' import { useMenu } from '@/store' import { APP_MENU_CONFIG } from '@/appConfig/appConfig' -import { useVueRouter } from '@/router/helper/useVueRouter' import type { MenuInst } from 'naive-ui' import type { NaiveMenuOptions } from '@/types/modules/component' @@ -17,7 +25,6 @@ const LayoutMenu = defineComponent({ const menuRef = ref(null) const menuStore = useMenu() - const { router } = useVueRouter() const { changeMenuModelValue, collapsedMenu } = menuStore const modelMenuKey = computed({ @@ -33,17 +40,6 @@ const LayoutMenu = defineComponent({ }) const modelMenuOptions = computed(() => menuStore.options) const modelCollapsed = computed(() => menuStore.collapsed) - const { - layout: { sideBarLogo }, - } = __APP_CFG__ - - const handleSideBarLogoClick = () => { - if (sideBarLogo && sideBarLogo.url) { - sideBarLogo.jumpType === 'station' - ? router.push(sideBarLogo.url) - : window.open(sideBarLogo.url) - } - } const showMenuOption = () => { const key = modelMenuKey.value as string @@ -59,8 +55,6 @@ const LayoutMenu = defineComponent({ modelMenuOptions, modelCollapsed, collapsedMenu, - sideBarLogo, - handleSideBarLogoClick, menuRef, } }, @@ -74,31 +68,7 @@ const LayoutMenu = defineComponent({ onUpdateCollapsed={this.collapsedMenu.bind(this)} nativeScrollbar={false} > - {this.sideBarLogo ? ( -
- {this.sideBarLogo.icon ? ( - - ) : ( - '' - )} -

- {this.sideBarLogo.title} -

-
- ) : ( - '' - )} + { + menuTag.scrollIntoView?.() + }) } }) } diff --git a/src/layout/components/SiderBar/components/Breadcrumb/index.tsx b/src/layout/components/SiderBar/components/Breadcrumb/index.tsx index 00ebbe30..835a8646 100644 --- a/src/layout/components/SiderBar/components/Breadcrumb/index.tsx +++ b/src/layout/components/SiderBar/components/Breadcrumb/index.tsx @@ -22,7 +22,7 @@ import { NDropdown, NBreadcrumb, NBreadcrumbItem } from 'naive-ui' import { useMenu } from '@/store' -import type { DropdownOption, MenuOption } from 'naive-ui' +import type { DropdownOption } from 'naive-ui' import type { AppMenuOption, MenuTagOptions, diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx index b10b8c2c..44f196ac 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx @@ -1,4 +1,5 @@ import './index.scss' + import { NDrawer, NDrawerContent, @@ -8,6 +9,7 @@ import { NColorPicker, NDescriptions, NDescriptionsItem, + NSelect, } from 'naive-ui' import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index' @@ -39,7 +41,8 @@ const SettingDrawer = defineComponent({ const { t } = useI18n() const settingStore = useSetting() - const { changePrimaryColor, changeSwitcher } = settingStore + const { changePrimaryColor, changeSwitcher, updateContentTransition } = + settingStore const { themeValue, primaryColorOverride, @@ -47,6 +50,7 @@ const SettingDrawer = defineComponent({ breadcrumbSwitch, invertSwitch, footerSwitch, + contentTransition, } = storeToRefs(settingStore) const modelShow = computed({ @@ -55,6 +59,24 @@ const SettingDrawer = defineComponent({ emit('update:show', bool) }, }) + const contentTransitionOptions = [ + { + label: '无', + value: 'none', + }, + { + label: '缩放效果', + value: 'scale', + }, + { + label: '淡入淡出', + value: 'fade', + }, + { + label: '闪入效果', + value: 'opacity', + }, + ] return { modelShow, @@ -67,6 +89,9 @@ const SettingDrawer = defineComponent({ breadcrumbSwitch, invertSwitch, footerSwitch, + contentTransitionOptions, + contentTransition, + updateContentTransition, } }, render() { @@ -92,6 +117,16 @@ const SettingDrawer = defineComponent({ v-model:value={this.primaryColorOverride.common!.primaryColor} onUpdateValue={this.changePrimaryColor.bind(this)} /> + + {t('headerSettingOptions.ContentTransition')} + + { + this.updateContentTransition(value) + }} + /> {t('headerSettingOptions.InterfaceDisplay')} diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index 40b0a26e..08e16710 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -17,8 +17,8 @@ import './index.scss' -import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' import { NSpin } from 'naive-ui' +import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' import AppRequestCanceler from '@/app-components/provider/AppRequestCanceler/index' import { useSetting } from '@/store' @@ -31,7 +31,7 @@ const ContentWrapper = defineComponent({ const settingStore = useSetting() const router = useRouter() - const { reloadRouteSwitch } = storeToRefs(settingStore) + const { reloadRouteSwitch, contentTransition } = storeToRefs(settingStore) const spinning = ref(false) const thmeOverridesSpin: GlobalThemeOverrides['Spin'] = { opacitySpinning: '0', @@ -43,9 +43,7 @@ const ContentWrapper = defineComponent({ }) router.afterEach(() => { - setTimeout(() => { - spinning.value = false - }, 300) + spinning.value = false }) } @@ -55,6 +53,7 @@ const ContentWrapper = defineComponent({ reloadRouteSwitch, spinning, thmeOverridesSpin, + contentTransition, } }, render() { @@ -69,7 +68,7 @@ const ContentWrapper = defineComponent({ {this.reloadRouteSwitch ? ( ) : ( '' diff --git a/src/layout/default/FeatureWrapper/index.tsx b/src/layout/default/FeatureWrapper/index.tsx new file mode 100644 index 00000000..5c349eae --- /dev/null +++ b/src/layout/default/FeatureWrapper/index.tsx @@ -0,0 +1,24 @@ +/** + * + * @author Ray + * + * @date 2023-08-09 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import MenuTag from '@/layout/components/MenuTag/index' + +const FeatureWrapper = defineComponent({ + name: 'FeatureWrapper', + setup() { + return {} + }, + render() { + return + }, +}) + +export default FeatureWrapper diff --git a/src/layout/default/FooterWrapper/index.scss b/src/layout/default/FooterWrapper/index.scss index 697fbf18..f14b60bf 100644 --- a/src/layout/default/FooterWrapper/index.scss +++ b/src/layout/default/FooterWrapper/index.scss @@ -1,4 +1,4 @@ .layout-footer-wrapper { - padding: 20px; + padding: 0 20px 8px 20px; text-align: center; } diff --git a/src/layout/default/HeaderWrapper/index.tsx b/src/layout/default/HeaderWrapper/index.tsx new file mode 100644 index 00000000..830f0535 --- /dev/null +++ b/src/layout/default/HeaderWrapper/index.tsx @@ -0,0 +1,29 @@ +/** + * + * @author Ray + * + * @date 2023-08-09 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NSpace } from 'naive-ui' +import SiderBar from '@/layout/components/SiderBar/index' + +const HeaderWrapper = defineComponent({ + name: 'HeaderWrapper', + setup() { + return {} + }, + render() { + return ( + + + + ) + }, +}) + +export default HeaderWrapper diff --git a/src/layout/index.scss b/src/layout/index.scss index 5aad8577..ea0d3ff4 100644 --- a/src/layout/index.scss +++ b/src/layout/index.scss @@ -1,4 +1,4 @@ -.r-layout-full.r-layout-full { +.r-layout-full { position: fixed; inset: 0; diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 61f9ee2a..45c7edf0 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -11,19 +11,19 @@ import './index.scss' -import { NLayout, NLayoutContent, NScrollbar } from 'naive-ui' +import { NLayout, NLayoutContent } from 'naive-ui' import Menu from './components/Menu/index' -import SiderBar from './components/SiderBar/index' -import MenuTag from './components/MenuTag/index' import ContentWrapper from '@/layout/default/ContentWrapper' import FooterWrapper from '@/layout/default/FooterWrapper' +import HeaderWrapper from './default/HeaderWrapper' +import FeatureWrapper from './default/FeatureWrapper' import { useSetting } from '@/store' import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig' import { layoutHeaderCssVars } from '@/layout/layoutResize' import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar' -const Layout = defineComponent({ +const RLayout = defineComponent({ name: 'RLayout', setup() { const layoutSiderBarRef = ref() @@ -57,8 +57,12 @@ const Layout = defineComponent({ - - {this.modelMenuTagSwitch ? : ''} + + {this.modelMenuTagSwitch ? ( + + ) : ( + '' + )} { + settingState.contentTransition = value + } + /** 修改当前语言 */ const updateLocale = (key: string) => { locale(key) @@ -103,6 +109,7 @@ export const useSetting = defineStore( updateLocale, changePrimaryColor, changeSwitcher, + updateContentTransition, } }, { diff --git a/src/store/modules/setting/type.ts b/src/store/modules/setting/type.ts index d3313685..ead87cf2 100644 --- a/src/store/modules/setting/type.ts +++ b/src/store/modules/setting/type.ts @@ -14,4 +14,5 @@ export interface SettingState { lockScreenSwitch: boolean lockScreenInputSwitch: boolean footerSwitch: boolean + contentTransition: string } diff --git a/src/styles/animate.scss b/src/styles/animate.scss index c3983103..530adb9f 100644 --- a/src/styles/animate.scss +++ b/src/styles/animate.scss @@ -15,17 +15,64 @@ opacity: 0; } -.fade-enter-active, -.fade-leave-active { - transition: all 0.35s ease; +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all 0.5s; } -.fade-enter-from { +.fade-transform-enter-from { opacity: 0; - transform: translateX(-30px); + transform: translateX(-50px); } -.fade-leave-to { +.fade-transform-leave-to { + opacity: 0; + transform: translateX(50px); +} + +/* down-transform */ +.down-transform-leave-active, +.down-transform-enter-active { + transition: all 0.5s; +} + +.down-transform-enter-from { + opacity: 0; + transform: translateY(-50px); +} + +.down-transform-leave-to { + opacity: 0; + transform: translateY(50px); +} + +/* scale-transform */ +.scale-transform-leave-active, +.scale-transform-enter-active { + transition: all 0.5s; +} + +.scale-transform-enter-from { + opacity: 0; + transform: scale(2); +} + +.scale-transform-leave-to { + opacity: 0; + transform: scale(0.5); +} + +/* opacity-transform */ +.opacity-transform-leave-active, +.opacity-transform-enter-active { + transition: all 0.5s; +} + +.opacity-transform-enter-from { + opacity: 0; +} + +.opacity-transform-leave-to { opacity: 0; - transform: translateX(30px); } diff --git a/vite.config.ts b/vite.config.ts index e784623a..7f764980 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -67,7 +67,7 @@ export default defineConfig(async ({ mode }) => { alias: alias, }, plugins: [ - vue({ reactivityTransform: true }), + vue(), viteVueJSX(), title, viteVeI18nPlugin({}),