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

feat: introduce animations

Browse Source
This commit is contained in:
liyasthomas
2021-06-13 20:31:42 +05:30
parent 685f9d506d
commit ced2f1b911
7 changed files with 311 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/scss/styles.scss
View File

@@ -1,4 +1,4 @@
$responsiveWidth: 768px; $responsiveWidth: 767px;
*, *,
*::before, *::before,
@@ -52,6 +52,7 @@ body {
@apply transition-colors; @apply transition-colors;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply overflow-x-hidden;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;

2
components/app/Header.vue
View File

@@ -300,8 +300,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px;
.logo { .logo {
@apply text-xl; @apply text-xl;
@apply transition-colors; @apply transition-colors;

4
components/app/Sidenav.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<TranslateSlideRight appear>
<aside class="nav-first"> <aside class="nav-first">
<nav class="primary-nav"> <nav class="primary-nav">
<!-- <!--
@@ -120,6 +121,7 @@
</a> </a>
</nav> </nav>
</aside> </aside>
</TranslateSlideRight>
</template> </template>
<script> <script>
@@ -154,7 +156,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px; $responsiveWidth: 767px;
.nav-first { .nav-first {
@apply h-screen; @apply h-screen;

25
components/translate/SlideLeft.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<transition
: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>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>

25
components/translate/SlideRight.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<transition
:appear="appear"
name="translate-slide-right"
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>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>

7
pages/graphql.vue
View File

@@ -340,7 +340,11 @@
</AppSection> </AppSection>
</div> </div>
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md"> <TranslateSlideLeft>
<aside
v-if="activeSidebar"
class="sticky-inner inner-right lg:max-w-md"
>
<SmartTabs> <SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true"> <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection ref="docs" :label="$t('docs')" no-legend> <AppSection ref="docs" :label="$t('docs')" no-legend>
@@ -463,6 +467,7 @@
</SmartTab> --> </SmartTab> -->
</SmartTabs> </SmartTabs>
</aside> </aside>
</TranslateSlideLeft>
<SmartHideMenu <SmartHideMenu
:active="activeSidebar" :active="activeSidebar"

7
pages/index.vue
View File

@@ -615,7 +615,11 @@
/> />
</div> </div>
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md"> <TranslateSlideLeft>
<aside
v-if="activeSidebar"
class="sticky-inner inner-right lg:max-w-md"
>
<section> <section>
<SmartTabs> <SmartTabs>
<SmartTab :id="'history'" :label="$t('history')" :selected="true"> <SmartTab :id="'history'" :label="$t('history')" :selected="true">
@@ -640,6 +644,7 @@
</SmartTabs> </SmartTabs>
</section> </section>
</aside> </aside>
</TranslateSlideLeft>
<SmartHideMenu <SmartHideMenu
:active="activeSidebar" :active="activeSidebar"