b4tman/pub1c-web.frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

animations

Browse Source
This commit is contained in:
Dmitry Belyaev 2021-06-07 13:47:09 +03:00
parent 6f338806ed
commit 4c8df5ba9c
Signed by: b4tman
GPG Key ID: 41A00BF15EA7E5F3
1 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/InfobaseListItem.vue
View File

@ -4,6 +4,7 @@
<td class="text-center">{{ name }}</td> <td class="text-center">{{ name }}</td>
<td class="text-start"> <td class="text-start">
<template v-if="publicated"> <template v-if="publicated">
<transition name="slide-fade" mode="out-in">
<InfobaseURLEditor <InfobaseURLEditor
v-if="url_edit" v-if="url_edit"
:infobase_name="name" :infobase_name="name"
@ -11,18 +12,24 @@
:init_url="url" :init_url="url"
@submit="apply_edit_url" @submit="apply_edit_url"
@cancel="cancel_edit_url" @cancel="cancel_edit_url"
/> /> </transition
><transition name="fade-fast" mode="out-in">
<a <a
class="text-break" class="text-break"
v-if="!url_edit" v-if="!url_edit"
v-bind:href="url_full" v-bind:href="url_full"
target="blank" target="blank"
style="position: absolute"
>{{ url }}</a >{{ url }}</a
></transition
> >
</template> </template>
</td> </td>
<td class="text-end"> <td class="text-end">
<div v-if="!url_edit && !is_locked" class="btn-group shadow" role="group"> <transition name="slide-left-fade" mode="out-in">
<template v-if="!url_edit">
<transition name="slide-left-fade" mode="out-in">
<div v-if="!is_locked" class="btn-group shadow" role="group">
<button <button
v-if="publicated" v-if="publicated"
type="button" type="button"
@ -54,7 +61,8 @@
Публиковать Публиковать
</button> </button>
</div> </div>
<ItemLoading v-if="is_locked" /> <ItemLoading v-else /> </transition></template
></transition>
</td> </td>
</tr> </tr>
</template> </template>
@ -129,3 +137,38 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.slide-fade-enter-active {
transition: all 0.2s ease-out;
}
.slide-fade-leave-active {
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(40px);
opacity: 0;
}
.slide-left-fade-enter-active {
transition: all 0.2s ease-out;
}
.slide-left-fade-leave-active {
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-left-fade-enter-from,
.slide-left-fade-leave-to {
transform: translateX(-40px);
opacity: 0;
}
.fade-fast-enter-active {
transition: all 1s ease-out;
}
.fade-fast-leave-active {
opacity: 0;
}
.fade-fast-enter-from,
.fade-fast-leave-to {
opacity: 0;
}
</style>