vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Menu animations redone with Vue

pull/12/head
cagataycivici 2019-05-21 18:53:28 +03:00
parent c52dc30f3f
commit 2c9d0608c7
2 changed files with 123 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/AppMenu.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<div :class="['layout-sidebar', {'active': active}]"> <div :class="['layout-sidebar', {'active': active}]">
<div class="layout-menu"> <div class="layout-menu">
<a @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}"> <a tabindex="0" @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
<img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" /> <img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
<img alt="input" class="layout-menu-icon-active" src="./assets/images/menu/input-active.svg" /> <img alt="input" class="layout-menu-icon-active" src="./assets/images/menu/input-active.svg" />
<span>Input</span> <span>Input</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 0">
<div> <div>
<router-link to="/autocomplete">&#9679; AutoComplete</router-link> <router-link to="/autocomplete">&#9679; AutoComplete</router-link>
<router-link to="/calendar">&#9679; Calendar</router-link> <router-link to="/calendar">&#9679; Calendar</router-link>
@ -30,38 +31,44 @@
<router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link> <router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}"> <a tabindex="0" @click="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}">
<img alt="button" class="layout-menu-icon-inactive" src="./assets/images/menu/button.svg" /> <img alt="button" class="layout-menu-icon-inactive" src="./assets/images/menu/button.svg" />
<img alt="button" class="layout-menu-icon-active" src="./assets/images/menu/button-active.svg" /> <img alt="button" class="layout-menu-icon-active" src="./assets/images/menu/button-active.svg" />
<span>Button</span> <span>Button</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 1, 'submenushow': activeMenuIndex === 1}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 1">
<div> <div>
<router-link to="/button">&#9679; Button</router-link> <router-link to="/button">&#9679; Button</router-link>
<router-link to="/splitbutton">&#9679; SplitButton</router-link> <router-link to="/splitbutton">&#9679; SplitButton</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 2)" :class="{'active-menuitem': activeMenuIndex === 2}"> <a tabindex="0" @click="toggleMenu($event, 2)" :class="{'active-menuitem': activeMenuIndex === 2}">
<img alt="data" class="layout-menu-icon-inactive" src="./assets/images/menu/data.svg" /> <img alt="data" class="layout-menu-icon-inactive" src="./assets/images/menu/data.svg" />
<img alt="data" class="layout-menu-icon-active" src="./assets/images/menu/data-active.svg" /> <img alt="data" class="layout-menu-icon-active" src="./assets/images/menu/data-active.svg" />
<span>Data</span> <span>Data</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 2">
<div> <div>
<router-link to="/dataview">&#9679; DataView</router-link> <router-link to="/dataview">&#9679; DataView</router-link>
<router-link to="/fullcalendar">&#9679; FullCalendar</router-link> <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
<router-link to="/paginator">&#9679; Paginator</router-link> <router-link to="/paginator">&#9679; Paginator</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 3)" :class="{'active-menuitem': activeMenuIndex === 3}"> <a tabindex="0" @click="toggleMenu($event, 3)" :class="{'active-menuitem': activeMenuIndex === 3}">
<img alt="panel" class="layout-menu-icon-inactive" src="./assets/images/menu/panel.svg" /> <img alt="panel" class="layout-menu-icon-inactive" src="./assets/images/menu/panel.svg" />
<img alt="panel" class="layout-menu-icon-active" src="./assets/images/menu/panel-active.svg" /> <img alt="panel" class="layout-menu-icon-active" src="./assets/images/menu/panel-active.svg" />
<span>Panel</span> <span>Panel</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 3">
<div> <div>
<router-link to="/accordion">&#9679; Accordion</router-link> <router-link to="/accordion">&#9679; Accordion</router-link>
<router-link to="/card">&#9679; Card</router-link> <router-link to="/card">&#9679; Card</router-link>
@ -72,48 +79,56 @@
<router-link to="/toolbar">&#9679; Toolbar</router-link> <router-link to="/toolbar">&#9679; Toolbar</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 4)" :class="{'active-menuitem': activeMenuIndex === 4}"> <a tabindex="0" @click="toggleMenu($event, 4)" :class="{'active-menuitem': activeMenuIndex === 4}">
<img alt="overlay" class="layout-menu-icon-inactive" src="./assets/images/menu/overlay.svg" /> <img alt="overlay" class="layout-menu-icon-inactive" src="./assets/images/menu/overlay.svg" />
<img alt="overlay" class="layout-menu-icon-active" src="./assets/images/menu/overlay-active.svg" /> <img alt="overlay" class="layout-menu-icon-active" src="./assets/images/menu/overlay-active.svg" />
<span>Overlay</span> <span>Overlay</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 4, 'submenushow': activeMenuIndex === 4}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 4">
<div> <div>
<router-link to="/dialog">&#9679; Dialog</router-link> <router-link to="/dialog">&#9679; Dialog</router-link>
<router-link to="/overlaypanel">&#9679; OverlayPanel</router-link> <router-link to="/overlaypanel">&#9679; OverlayPanel</router-link>
<router-link to="/sidebar">&#9679; Sidebar</router-link> <router-link to="/sidebar">&#9679; Sidebar</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 5)" :class="{'active-menuitem': activeMenuIndex === 5}"> <a tabindex="0" @click="toggleMenu($event, 5)" :class="{'active-menuitem': activeMenuIndex === 5}">
<img alt="file" class="layout-menu-icon-inactive" src="./assets/images/menu/file.svg" /> <img alt="file" class="layout-menu-icon-inactive" src="./assets/images/menu/file.svg" />
<img alt="file" class="layout-menu-icon-active" src="./assets/images/menu/file-active.svg" /> <img alt="file" class="layout-menu-icon-active" src="./assets/images/menu/file-active.svg" />
<span>File</span> <span>File</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 5, 'submenushow': activeMenuIndex === 5}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 5">
<div> <div>
<router-link to="/fileupload">&#9679; Upload</router-link> <router-link to="/fileupload">&#9679; Upload</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 6)" :class="{'active-menuitem': activeMenuIndex === 6}"> <a tabindex="0" @click="toggleMenu($event, 6)" :class="{'active-menuitem': activeMenuIndex === 6}">
<img alt="menu" class="layout-menu-icon-inactive" src="./assets/images/menu/menu.svg" /> <img alt="menu" class="layout-menu-icon-inactive" src="./assets/images/menu/menu.svg" />
<img alt="menu" class="layout-menu-icon-active" src="./assets/images/menu/menu-active.svg" /> <img alt="menu" class="layout-menu-icon-active" src="./assets/images/menu/menu-active.svg" />
<span>Menu</span> <span>Menu</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 6, 'submenushow': activeMenuIndex === 6}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 6">
<div> <div>
<router-link to="/">&#9679; Link</router-link> <router-link to="/">&#9679; Link</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 7)" :class="{'active-menuitem': activeMenuIndex === 7}"> <a tabindex="0" @click="toggleMenu($event, 7)" :class="{'active-menuitem': activeMenuIndex === 7}">
<img alt="charts" class="layout-menu-icon-inactive" src="./assets/images/menu/charts.svg" /> <img alt="charts" class="layout-menu-icon-inactive" src="./assets/images/menu/charts.svg" />
<img alt="charts" class="layout-menu-icon-active" src="./assets/images/menu/charts-active.svg" /> <img alt="charts" class="layout-menu-icon-active" src="./assets/images/menu/charts-active.svg" />
<span>Chart</span> <span>Chart</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 7, 'submenushow': activeMenuIndex === 7}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 7">
<div> <div>
<router-link to="/chart">&#9679; ChartModel</router-link> <router-link to="/chart">&#9679; ChartModel</router-link>
<router-link to="/chart/pie">&#9679; Pie</router-link> <router-link to="/chart/pie">&#9679; Pie</router-link>
@ -125,29 +140,34 @@
<router-link to="/chart/combo">&#9679; Combo</router-link> <router-link to="/chart/combo">&#9679; Combo</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 8)" :class="{'active-menuitem': activeMenuIndex === 8}"> <a tabindex="0" @click="toggleMenu($event, 8)" :class="{'active-menuitem': activeMenuIndex === 8}">
<img alt="message" class="layout-menu-icon-inactive" src="./assets/images/menu/message.svg" /> <img alt="message" class="layout-menu-icon-inactive" src="./assets/images/menu/message.svg" />
<img alt="message" class="layout-menu-icon-active" src="./assets/images/menu/message-active.svg" /> <img alt="message" class="layout-menu-icon-active" src="./assets/images/menu/message-active.svg" />
<span>Messages</span> <span>Messages</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 8, 'submenushow': activeMenuIndex === 8}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 8">
<div> <div>
<router-link to="/message">&#9679; Message</router-link> <router-link to="/message">&#9679; Message</router-link>
<router-link to="/toast">&#9679; Toast</router-link> <router-link to="/toast">&#9679; Toast</router-link>
</div> </div>
</div> </div>
</transition>
<a @click="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}"> <a tabindex="0" @click="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
<img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" /> <img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" />
<img alt="misc" class="layout-menu-icon-active" src="./assets/images/menu/misc-active.svg" /> <img alt="misc" class="layout-menu-icon-active" src="./assets/images/menu/misc-active.svg" />
<span>Misc</span> <span>Misc</span>
</a> </a>
<div :class="{'submenuhide': activeMenuIndex !== 9, 'submenushow': activeMenuIndex === 9}"> <transition name="layout-submenu-wrapper">
<div v-show="activeMenuIndex === 9">
<div> <div>
<router-link to="/progressbar">&#9679; ProgressBar</router-link> <router-link to="/progressbar">&#9679; ProgressBar</router-link>
</div> </div>
</div> </div>
</transition>
</div> </div>
</div> </div>
</template> </template>

40
src/assets/styles/app.scss
View File

@ -276,7 +276,6 @@ body {
> div { > div {
width: auto; width: auto;
overflow: hidden;
background-color: #ffffff; background-color: #ffffff;
> div { > div {
@ -284,33 +283,24 @@ body {
padding: 20px 15px; padding: 20px 15px;
} }
&.submenuhide { &.layout-submenu-wrapper-enter,
overflow: hidden; &.layout-submenu-wrapper-leave-to {
max-height: 0; max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
} }
&.submenushow { &.layout-submenu-wrapper-enter-to,
-moz-transition-duration: 0.4s; &.layout-submenu-wrapper-leave {
-webkit-transition-duration: 0.4s; max-height: 1000px;
-o-transition-duration: 0.4s; }
transition-duration: 0.4s;
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); &.layout-submenu-wrapper-leave-active {
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); overflow: hidden;
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
max-height: 500px;
&.layout-submenu-wrapper-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
} }
a { a {