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

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>