github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-28 07:48:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Remove transition from menu/dialog components

Browse Source
This commit is contained in:
rijkvanzanten
2020-08-05 13:01:23 -04:00
parent 089224eba3
commit 6ef71fa2ba
2 changed files with 28 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/src/components/v-dialog/v-dialog.vue
View File

@@ -2,13 +2,11 @@
<div class="v-dialog">
<slot name="activator" v-bind="{ on: () => $emit('toggle', true) }" />
<portal to="outlet">
<transition name="dialog">
<div v-if="active" class="container" :class="[className]">
<v-overlay active absolute @click="emitToggle" />
<slot />
</div>
</transition>
<portal to="dialog-outlet">
<div v-if="active" class="container" :class="[className]">
<v-overlay active absolute @click="emitToggle" />
<slot />
</div>
</portal>
</div>
</template>
@@ -114,24 +112,4 @@ export default defineComponent({
transform: scale(1);
}
}
.dialog-enter-active,
.dialog-leave-active {
transition: opacity var(--slow) var(--transition);
::v-deep > *:not(.v-overlay) {
transform: translateY(0px);
transition: transform var(--slow) var(--transition-in);
}
}
.dialog-enter,
.dialog-leave-to {
opacity: 0;
::v-deep > *:not(.v-overlay) {
transform: translateY(50px);
transition: transform var(--slow) var(--transition-out);
}
}
</style>

110
app/src/components/v-menu/v-menu.vue
View File

@@ -18,33 +18,31 @@
/>
</div>
<portal to="outlet">
<transition name="bounce">
<portal to="menu-outlet" v-if="isActive">
<div
class="v-menu-popper"
:key="id"
:id="id"
:class="{ active: isActive, attached }"
:data-placement="popperPlacement"
:style="styles"
v-click-outside="{
handler: deactivate,
middleware: onClickOutsideMiddleware,
disabled: isActive === false || closeOnClick === false,
events: ['click'],
}"
>
<div
class="v-menu-popper"
:id="id"
:class="{ active: isActive, attached }"
:data-placement="popperPlacement"
:style="styles"
v-if="isActive"
v-click-outside="{
handler: deactivate,
middleware: onClickOutsideMiddleware,
disabled: isActive === false || closeOnClick === false,
events: ['click'],
}"
>
<div
class="arrow"
:class="{ active: showArrow && isActive }"
:style="arrowStyles"
data-popper-arrow
/>
<div class="v-menu-content" @click.stop="onContentClick">
<slot :active="isActive" />
</div>
class="arrow"
:class="{ active: showArrow && isActive }"
:style="arrowStyles"
data-popper-arrow
/>
<div class="v-menu-content" @click.stop="onContentClick">
<slot :active="isActive" />
</div>
</transition>
</div>
</portal>
</div>
</template>
@@ -410,68 +408,6 @@ body {
transform-origin: bottom right;
}
.bounce-enter-active,
.bounce-leave-active {
transition: opacity var(--fast) var(--transition);
& > .v-menu-content {
transition: transform var(--fast) cubic-bezier(0, 0, 0.2, 1.5);
}
}
.bounce-enter,
.bounce-leave-to {
opacity: 0;
&[data-placement='top'] > .v-menu-content {
transform: scaleY(0.8);
}
&[data-placement='top-start'] > .v-menu-content {
transform: scaleY(0.8) scaleX(0.8);
}
&[data-placement='top-end'] > .v-menu-content {
transform: scaleY(0.8) scaleX(0.8);
}
&[data-placement='right'] > .v-menu-content {
transform: scaleX(0.8);
}
&[data-placement='right-start'] > .v-menu-content {
transform: scaleY(0.8) scaleX(0.8);
}
&[data-placement='right-end'] > .v-menu-content {
transform: scaleY(0.8) scaleX(0.8);
}
&[data-placement='bottom'] > .v-menu-content {
transform: scaleY(0.8);
}
&[data-placement='bottom-start'] > .v-menu-content {
transform: scaleY(0.8);
}
&[data-placement='bottom-end'] > .v-menu-content {
transform: scaleY(0.8);
}
&[data-placement='left'] > .v-menu-content {
transform: scaleX(0.8);
}
&[data-placement='left-start'] > .v-menu-content {
transform: scaleY(0.8) scaleX(0.8);
}
&[data-placement='left-end'] > .v-menu-content {
transform: scaleY(0.8) scaleX(0.8);
}
}
.attached {
&[data-placement^='top'] {
> .v-menu-content {