github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 16:18:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add right placement transition for dialog

Browse Source
This commit is contained in:
rijkvanzanten
2020-10-16 13:13:05 -04:00
parent 6d76cf6737
commit 38440e229b
2 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/components/transition/dialog/transition-dialog.vue
View File

@@ -6,23 +6,33 @@
<style lang="scss">
/** @NOTE this is not scoped on purpose. The children are outside of the tree (portal) */
// .dialog-enter-active,
// .dialog-leave-active {
// transition: opacity var(--slow) var(--transition);
.dialog-enter-active,
.dialog-leave-active {
transition: opacity var(--slow) var(--transition);
// & > *:not(.v-overlay) {
// transform: translateY(0px);
// transition: transform var(--slow) var(--transition-in);
// }
// }
&.center > *:not(.v-overlay) {
transform: translateY(0px);
transition: transform var(--slow) var(--transition-in);
}
// .dialog-enter,
// .dialog-leave-to {
// opacity: 0;
&.right > *:not(.v-overlay) {
transform: translateX(0px);
transition: transform var(--slow) var(--transition-in);
}
}
// & > *:not(.v-overlay) {
// transform: translateY(50px);
// transition: transform var(--slow) var(--transition-out);
// }
// }
.dialog-enter,
.dialog-leave-to {
opacity: 0;
&.center > *:not(.v-overlay) {
transform: translateY(50px);
transition: transform var(--slow) var(--transition-out);
}
&.right > *:not(.v-overlay) {
transform: translateX(50px);
transition: transform var(--slow) var(--transition-out);
}
}
</style>

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

@@ -99,16 +99,29 @@ export default defineComponent({
display: flex;
width: 100%;
height: 100%;
transition: opacity var(--medium) var(--transition);
::v-deep > * {
z-index: 2;
box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
}
&.center {
align-items: center;
justify-content: center;
&.nudge > ::v-deep *:not(:first-child) {
animation: nudge 200ms;
}
}
&.right {
align-items: center;
justify-content: flex-end;
&.nudge > ::v-deep *:not(:first-child) {
transform-origin: right;
animation: shake 200ms;
}
}
::v-deep .v-card {
@@ -125,15 +138,6 @@ export default defineComponent({
.v-overlay {
--v-overlay-z-index: 1;
}
&.nudge {
animation: nudge 200ms;
}
::v-deep > * {
z-index: 2;
box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
}
}
@keyframes nudge {
@@ -149,4 +153,18 @@ export default defineComponent({
transform: scale(1);
}
}
@keyframes shake {
0% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.98);
}
100% {
transform: scaleX(1);
}
}
</style>