amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2025-01-22 20:04:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: improve transition effects for PostSlider and RightSlider by a hack way

Browse Source
This commit is contained in:
dribble-njr 2025-01-09 21:42:20 +08:00
parent f11c31cd96
commit 8041617ea1
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/CodemirrorEditor/PostSlider.vue
View File

@ -57,13 +57,19 @@ function delPost() {
<template>
<div
class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
:class="{
'w-0': !store.isOpenPostSlider,
'w-50': store.isOpenPostSlider,
}"
>
<nav class="space-y-1 h-full overflow-auto p-2">
<nav
class="space-y-1 h-full overflow-auto p-2 transition-transform"
:class="{
'translate-x-100': store.isOpenPostSlider,
'-translate-x-full': !store.isOpenPostSlider,
}"
>
<Dialog v-model:open="isOpen">
<DialogTrigger as-child>
<Button variant="outline" class="w-full" size="xs">
@ -86,10 +92,7 @@ function delPost() {
</DialogContent>
</Dialog>
<a
v-for="(post, index) in store.posts"
:key="post.title"
href="#"
:class="{
v-for="(post, index) in store.posts" :key="post.title" href="#" :class="{
'bg-primary text-primary-foreground shadow-lg border-2 border-primary': store.currentPostIndex === index,
'dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
}"

9
src/components/CodemirrorEditor/RightSlider.vue
View File

@ -40,13 +40,18 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
<template>
<div
class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
:class="{
'w-0': !store.isOpenRightSlider,
'w-100': store.isOpenRightSlider,
}"
>
<div class="space-y-4 h-full overflow-auto p-4">
<div
class="space-y-4 h-full overflow-auto p-4 transition-transform" :class="{
'translate-x-0': store.isOpenRightSlider,
'translate-x-full': !store.isOpenRightSlider,
}"
>
<div class="space-y-2">
<h2>主题</h2>
<div class="grid grid-cols-3 justify-items-center gap-2">