Skip to content

Commit

Permalink
Implemented: animation for the side menu(#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ymaheshwari1
ymaheshwari1 committed Jan 1, 2024
1 parent 287f5fa commit e59521d
Showing 1 changed file with 92 additions and 66 deletions.
158 changes: 92 additions & 66 deletions src/components/RouteMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,30 @@
<template>
<div class="route-menu">
<div v-if="isOnBrokeringRulePage">
<div>
<ion-list>
<ion-list-header>
<ion-list-header ref="listHeader">
<ion-label>{{ "Order batches" }}</ion-label>
<ion-button color="primary" fill="clear">
{{ "New" }}
<ion-icon :icon="addCircleOutline" />
</ion-button>
</ion-list-header>
<ion-card ref="card" @click="router.push('query')">
<ion-card v-for="card in [1, 2, 3, 4]" ref="cards" :key="card" @click.prevent="animate">
<ion-item lines="full">
<ion-label>
<h1>{{ 'Order lookup name' }}</h1>
</ion-label>
<ion-chip >{{ '1/4' }}</ion-chip>
<ion-chip>{{ `${card}/4` }}</ion-chip>
</ion-item>
<ion-item ref="item">
<ion-badge>{{ 'BADGE' }}</ion-badge>
<ion-button fill="clear" color="medium" slot="end">
{{ 'Archive' }}
</ion-button>
</ion-item>
</ion-card>
<ion-card ref="card" @click="router.push('query')">
<ion-item lines="full">
<ion-label>
<h1>{{ 'Order lookup name' }}</h1>
</ion-label>
<ion-chip >{{ '2/4' }}</ion-chip>
</ion-item>
<ion-item ref="item">
<ion-badge>{{ 'BADGE' }}</ion-badge>
<ion-button fill="clear" color="medium" slot="end">
{{ 'Archive' }}
</ion-button>
</ion-item>
</ion-card>
<ion-card ref="card" @click="router.push('query')">
<ion-item lines="full">
<ion-label>
<h1>{{ 'Order lookup name' }}</h1>
</ion-label>
<ion-chip >{{ '3/4' }}</ion-chip>
</ion-item>
<ion-item ref="item">
<ion-badge>{{ 'BADGE' }}</ion-badge>
<ion-button fill="clear" color="medium" slot="end">
{{ 'Archive' }}
</ion-button>
</ion-item>
</ion-card>
<ion-card ref="card" @click="router.push('query')">
<ion-item lines="full">
<ion-label>
<h1>{{ 'Order lookup name' }}</h1>
</ion-label>
<ion-chip >{{ '4/4' }}</ion-chip>
</ion-item>
<ion-item ref="item">
<ion-item v-show="isOnBrokeringRulePage" ref="item">
<ion-badge>{{ 'BADGE' }}</ion-badge>
<ion-button fill="clear" color="medium" slot="end">
{{ 'Archive' }}
</ion-button>
</ion-item>
</ion-card>
</ion-list>
<ion-footer>
<ion-footer v-show="isOnBrokeringRulePage">
<ion-toolbar>
<ion-item lines="none">
<ion-buttons>
Expand All @@ -81,9 +39,7 @@
</ion-item>
</ion-toolbar>
</ion-footer>
</div>
<div v-else>
<ion-list>
<ion-list v-show="!isOnBrokeringRulePage">
<ion-item-group>
<ion-item-divider color="medium">
<ion-label>{{ 'Filters' }}</ion-label>
Expand Down Expand Up @@ -114,38 +70,108 @@
</ion-item>
</ion-item-group>
</ion-list>
<ion-list>
<ion-list v-show="!isOnBrokeringRulePage">
<ion-item-group>
<ion-item-divider color="medium">
<ion-label>{{ 'Sort' }}</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>{{ 'Ship by' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ 'Ship after' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ 'Order date' }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ 'Shipping method' }}</ion-label>
</ion-item>
<ion-reorder-group :disabled="false">
<ion-item>
<ion-label>{{ 'Ship by' }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ 'Ship after' }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ 'Order date' }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ 'Shipping method' }}</ion-label>
<ion-reorder />
</ion-item>
</ion-reorder-group>
</ion-item-group>
</ion-list>
</div>
</div>
</template>

<script setup lang="ts">
import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToolbar, createAnimation } from '@ionic/vue';
import { addCircleOutline, archiveOutline } from "ionicons/icons";
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const cards = ref([])
const listHeader = ref(null) as any
const item = ref(null) as any
const moveTop = ref(0)
const isOnBrokeringRulePage = computed(() => router.currentRoute.value.fullPath.includes('/route'))
function animate(e: Event) {
if(isOnBrokeringRulePage.value) {
routeForward(e)
} else {
routeBackward(e)
}
}
function routeForward(e: Event) {
const element = e.currentTarget as HTMLElement
const hideCards = cards.value.map((card: any) => {
if(element != card.$el) {
return card.$el
}
}).filter(card => card)
createAnimation()
.addElement(listHeader.value.$el)
.addElement(item.value.$el)
.addElement(hideCards)
.duration(1000)
.fromTo('opacity', '1', '0')
.to('display', 'none').play()
moveTop.value = element.getBoundingClientRect().top
createAnimation()
.addElement(element)
.duration(1000)
.fromTo('transform', 'translateY(0px)', `translateY(-${moveTop.value}px)`).play()
router.push('query')
}
function routeBackward(e: Event) {
const showCards = cards.value.map((card: any) => {
if(e.currentTarget != card.$el) {
return card.$el
}
}).filter(card => card)
const element = e.currentTarget as HTMLElement
createAnimation()
.addElement(listHeader.value.$el)
.addElement(item.value.$el)
.addElement(showCards)
.duration(1000)
.fromTo('opacity', '0', '1')
.to('display', 'block').play()
createAnimation()
.addElement(element)
.duration(1000)
.fromTo('transform', `translateY(-${moveTop.value}px)`, 'translateY(0px)').play();
router.go(-1)
}
</script>

<style scoped>
Expand Down

0 comments on commit e59521d

Please sign in to comment.