mirror of
https://github.com/doocs/md.git
synced 2025-01-22 20:04:39 +08:00
style: improve transition effects for PostSlider and RightSlider by a hack way
This commit is contained in:
parent
f11c31cd96
commit
8041617ea1
@ -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,
|
||||
}"
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user