defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update aside transition

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-19 08:58:50 +07:00
parent 371b999a11
commit 36c34ade42
3 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/assets/css/style.css
View File

@ -1321,6 +1321,22 @@ select {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-0 {
--tw-scale-x: 0;
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-0 {
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-100 {
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@ -2397,6 +2413,14 @@ select {
transition-delay: 300ms;
}
.delay-200 {
transition-delay: 200ms;
}
.delay-150 {
transition-delay: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}

5
src/components/Aside/Aside.vue
View File

@ -1,8 +1,6 @@
<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import { RouterLink } from 'vue-router'
import { ref } from 'vue'
import { useRoute, RouterLink } from 'vue-router'
import {
Dialog,
DialogPanel,
@ -14,7 +12,6 @@ import { useMenuStore } from '@/stores/menu'
import { IconApp } from '@/utils/icons'
import AsideMenuSingle from '@/components/Aside/AsideMenuSingle.vue'
import AsideMenuMultiple from '@/components/Aside/AsideMenuMultiple.vue'
import type { MenuItemModel } from '@/utils/interfaces'
import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
const menu = useMenuStore()

6
src/components/Aside/AsideMenuMultiple.vue
View File

@ -50,11 +50,9 @@ const isMenuSelected = computed(() => {
</svg>
</DisclosureButton>
<transition enter-active-class="overflow-hidden transition-all duration-300"
enter-from-class="transform scale-95 opacity-0 max-h-0"
enter-to-class="transform scale-300 opacity-300 max-h-[1000px]"
enter-from-class="transform scale-95 max-h-0" enter-to-class="transform scale-100 max-h-[1000px]"
leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-to-class="transform scale-95 opacity-0 max-h-0">
leave-from-class="transform scale-100 max-h-[1000px]" leave-to-class="transform scale-95 max-h-0">
<div v-show="item.expanded">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
<!-- Nested children -->