From 78053c17fd91ccd7568fe57af3767cd6636929e2 Mon Sep 17 00:00:00 2001 From: Innei Date: Wed, 11 Sep 2024 20:16:44 +0800 Subject: [PATCH] feat: reduce motion use fade-in and fade-out transition Signed-off-by: Innei --- cssAsPlugin.js => configs/tw-css-plugin.js | 0 src/renderer/src/components/common/Motion.tsx | 11 +++++++++-- .../src/components/ui/list-item-hover-overlay.tsx | 3 ++- .../src/components/ui/modal/inspire/PeekModal.tsx | 2 +- src/renderer/src/modules/entry-content/index.tsx | 3 ++- src/renderer/src/providers/ui-setting-sync.tsx | 11 ++++++++++- tailwind.config.ts | 9 ++++++++- 7 files changed, 32 insertions(+), 7 deletions(-) rename cssAsPlugin.js => configs/tw-css-plugin.js (100%) diff --git a/cssAsPlugin.js b/configs/tw-css-plugin.js similarity index 100% rename from cssAsPlugin.js rename to configs/tw-css-plugin.js diff --git a/src/renderer/src/components/common/Motion.tsx b/src/renderer/src/components/common/Motion.tsx index 8501a85c9..bc706c2c4 100644 --- a/src/renderer/src/components/common/Motion.tsx +++ b/src/renderer/src/components/common/Motion.tsx @@ -16,11 +16,18 @@ export const m: typeof M = new Proxy(M, { const nextProps = { ...props } if (shouldReduceMotion) { if (props.exit) { - delete nextProps.exit + nextProps.exit = { + opacity: 0, + } } if (props.initial) { - nextProps.initial = true + nextProps.initial = { + opacity: 0, + } + } + nextProps.animate = { + opacity: 1, } } diff --git a/src/renderer/src/components/ui/list-item-hover-overlay.tsx b/src/renderer/src/components/ui/list-item-hover-overlay.tsx index 3e3d5d99c..55eedaf33 100644 --- a/src/renderer/src/components/ui/list-item-hover-overlay.tsx +++ b/src/renderer/src/components/ui/list-item-hover-overlay.tsx @@ -1,7 +1,8 @@ +import { m } from "@renderer/components/common/Motion" import { views } from "@renderer/constants" import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams" import clsx from "clsx" -import { AnimatePresence, m } from "framer-motion" +import { AnimatePresence } from "framer-motion" import { useEffect, useRef, useState } from "react" export const ListItemHoverOverlay = ({ diff --git a/src/renderer/src/components/ui/modal/inspire/PeekModal.tsx b/src/renderer/src/components/ui/modal/inspire/PeekModal.tsx index fcb0e445b..45cca466f 100644 --- a/src/renderer/src/components/ui/modal/inspire/PeekModal.tsx +++ b/src/renderer/src/components/ui/modal/inspire/PeekModal.tsx @@ -1,4 +1,4 @@ -import { m } from "framer-motion" +import { m } from "@renderer/components/common/Motion" import type { PropsWithChildren } from "react" import { createContext, useContext } from "react" import { Link } from "react-router-dom" diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx index 516d2a375..e0400849d 100644 --- a/src/renderer/src/modules/entry-content/index.tsx +++ b/src/renderer/src/modules/entry-content/index.tsx @@ -136,6 +136,7 @@ export const EntryContentRender: Component<{ entryId: string }> = ({ entryId, cl }) const isPeekModal = useInPeekModal() + if (!entry) return null const content = entry?.entries.content ?? data?.entries.content @@ -168,7 +169,7 @@ export const EntryContentRender: Component<{ entryId: string }> = ({ entryId, cl } : undefined } - className="duration-200 ease-in-out animate-in fade-in slide-in-from-bottom-24" + className="duration-200 ease-in-out animate-in fade-in slide-in-from-bottom-24 f-motion-reduce:fade-in-0 f-motion-reduce:slide-in-from-bottom-0" key={entry.entries.id} >
{ const setting = useUISettingValue() @@ -43,7 +44,15 @@ const useUISettingSync = () => { } }, [setting.voice]) } + +const useUXSettingSync = () => { + const reduceMotion = useReduceMotion() + useLayoutEffect(() => { + document.documentElement.dataset.motionReduce = reduceMotion ? "true" : "false" + }, [reduceMotion]) +} export const SettingSync = () => { useUISettingSync() + useUXSettingSync() return null } diff --git a/tailwind.config.ts b/tailwind.config.ts index a01889075..2c7956eea 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,10 +1,11 @@ -import "./cssAsPlugin" +import "./configs/tw-css-plugin" import path from "node:path" import { getIconCollections, iconsPlugin } from "@egoist/tailwindcss-icons" import { cleanupSVG, importDirectorySync, isEmptyColor, parseColors, runSVGO } from "@iconify/tools" import { compareColors, stringToColor } from "@iconify/utils/lib/colors" +import plugin from "tailwindcss/plugin" import resolveConfig from "tailwindcss/resolveConfig" /** @type {import('tailwindcss').Config} */ @@ -115,6 +116,7 @@ export default resolveConfig({ }), }, }, + plugins: [ iconsPlugin({ collections: { @@ -126,6 +128,11 @@ export default resolveConfig({ require("@tailwindcss/container-queries"), require("@tailwindcss/typography"), require("./src/renderer/src/styles/tailwind-extend.css"), + plugin(({ addVariant }) => { + addVariant("f-motion-reduce", '[data-motion-reduce="true"] &') + addVariant("group-motion-reduce", ':merge(.group)[data-motion-reduce="true"] &') + addVariant("peer-motion-reduce", ':merge(.peer)[data-motion-reduce="true"] ~ &') + }), ], })