Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(ui): Optimize transport tabs to use hardware-accelerated CSS transform

Browse Source
This commit is contained in:
Johan Samudio
2026-03-12 14:08:27 -05:00
parent 0e43ce70d1
commit 1b94aac0a5
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/views/TransporteLayout.vue
View File

@ -41,7 +41,7 @@ onMounted(async () => {
<span class="material-icons">directions_bus</span> <span class="material-icons">directions_bus</span>
{{ t('taxi.tabIntercity') }} {{ t('taxi.tabIntercity') }}
</router-link> </router-link>
<div class="tab-slider" :style="{ left: route.path.includes('taxis') ? '4px' : 'calc(50% + 2px)' }"></div> <div class="tab-slider" :class="{ 'slide-right': !route.path.includes('taxis') }"></div>
</div> </div>
</div> </div>
</header> </header>
@ -158,12 +158,18 @@ onMounted(async () => {
position: absolute; position: absolute;
top: 4px; top: 4px;
bottom: 4px; bottom: 4px;
left: 4px;
width: calc(50% - 6px); width: calc(50% - 6px);
background: #FEE715; background: #FEE715;
border-radius: 12px; border-radius: 12px;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 1; z-index: 1;
box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4); box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4);
will-change: transform;
}
.tab-slider.slide-right {
transform: translateX(calc(100% + 4px));
} }
.fade-enter-active, .fade-enter-active,