fix: draggable sider cards animation in reduced-motion

This commit is contained in:
agoudbg 2026-02-10 22:38:53 +08:00 committed by GitHub
parent 01b5ed1a8f
commit d5b5a249f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 16 additions and 16 deletions

View File

@ -213,7 +213,7 @@ const ConnCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">
@ -262,7 +262,7 @@ const ConnCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -83,7 +83,7 @@ const DNSCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -65,7 +65,7 @@ const LogCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -89,7 +89,7 @@ const MihomoCoreCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody>
<div
@ -141,7 +141,7 @@ const MihomoCoreCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -64,7 +64,7 @@ const OverrideCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -96,7 +96,7 @@ const ProfileCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1">
<div
@ -225,7 +225,7 @@ const ProfileCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -67,7 +67,7 @@ const ProxyCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -65,7 +65,7 @@ const ResourceCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -67,7 +67,7 @@ const RuleCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -83,7 +83,7 @@ const SniffCard: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -70,7 +70,7 @@ const SubStoreCard: React.FC<Props> = (props) => {
{...attributes}
{...listeners}
fullWidth
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -93,7 +93,7 @@ const SysproxySwitcher: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">

View File

@ -136,7 +136,7 @@ const TunSwitcher: React.FC<Props> = (props) => {
ref={setNodeRef}
{...attributes}
{...listeners}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${disableAnimations ? '' : `motion-reduce:transition-transform-background ${isDragging ? 'scale-[0.95] tap-highlight-transparent' : ''}`}`}
>
<CardBody className="pb-1 pt-0 px-0">
<div className="flex justify-between">