btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: janky sidebar animation (#1726)

Browse Source
This commit is contained in:
Ilya
2021-06-18 11:26:27 +05:00
committed by GitHub
parent 6a6754c7da
commit 2e1c0ae77a
2 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/scss/styles.scss
View File

@@ -727,11 +727,13 @@ section {
} }
.inner-right { .inner-right {
--width: 33%;
--ml: 1rem;
@apply flex; @apply flex;
@apply order-2; @apply order-2;
@apply ml-4;
width: 33%; margin-left: var(--ml);
width: var(--width);
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
@@ -770,7 +772,7 @@ section {
} }
.inner-right { .inner-right {
@apply ml-0; --ml: 0;
} }
.toasted-container { .toasted-container {

35
components/translate/SlideLeft.vue
View File

@@ -1,18 +1,8 @@
<template> <template>
<transition <transition :appear="appear" name="translate-slide-left">
:appear="appear"
name="translate-slide-left"
enter-active-class="transition duration-500 transform"
enter-class="translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition duration-500 transform"
leave-class="translate-x-0"
leave-to-class="translate-x-full"
>
<slot></slot> <slot></slot>
</transition> </transition>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
@@ -23,3 +13,26 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss">
.translate-slide-left {
&-enter,
&-leave-to {
width: 0%;
opacity: 0;
margin-left: 0;
}
&-enter-to,
&-leave {
width: var(--width, 33%);
margin-left: var(--ml, 0);
opacity: 1;
}
&-enter-active,
&-leave-active {
overflow-x: hidden;
white-space: nowrap;
transition: width 0.5s ease, opacity 0.3s ease, margin-left 0.5s ease;
}
}
</style>