ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix animation for sidebar

Browse Source
This commit is contained in:
liamcottle
2024-03-13 23:06:51 +13:00
parent 60ac7aa33e
commit 01bfe17b32
1 changed files with 64 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/public/index.html
View File

@ -173,12 +173,29 @@
</div> </div>
<!-- hardware models sidebar --> <!-- hardware models sidebar -->
<div class="relative z-sidebar" :class="{ 'hidden': !isShowingHardwareModels }" role="dialog" aria-modal="true"> <div class="relative z-sidebar" role="dialog" aria-modal="true">
<div @click="isShowingHardwareModels = !isShowingHardwareModels" class="fixed inset-0 bg-gray-900 bg-opacity-50"></div>
<div class="fixed top-0 left-0 overflow-hidden"> <!-- overlay -->
<div class="absolute inset-0 overflow-hidden"> <transition
<div class="fixed inset-y-0 left-0 flex max-w-full mr-10 sm:mr-16"> enter-active-class="transition-opacity duration-300 ease-linear"
<div class="pointer-events-auto w-screen max-w-md transform transition ease-in-out duration-500 sm:duration-700" :class="{ 'translate-x-0': isShowingHardwareModels, 'translate-x-full': !isShowingHardwareModels }"> enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity duration-300 ease-linear"
leave-from-class="opacity-100"
leave-to-class="opacity-0">
<div v-show="isShowingHardwareModels" @click="isShowingHardwareModels = !isShowingHardwareModels" class="fixed inset-0 bg-gray-900 bg-opacity-75"></div>
</transition>
<!-- sidebar -->
<transition
enter-active-class="transition duration-300 ease-in-out transform"
enter-from-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition duration-300 ease-in-out transform"
leave-from-class="translate-x-0"
leave-to-class="-translate-x-full">
<div v-show="isShowingHardwareModels" class="fixed top-0 left-0 bottom-0">
<div class="w-screen max-w-md overflow-hidden">
<div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl"> <div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
<!-- slideover header --> <!-- slideover header -->
@ -225,8 +242,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
</div>
</div> </div>
</div> </div>