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

137
src/components/InfobaseListItem.vue
View File

@ -4,57 +4,65 @@
<td class="text-center">{{ name }}</td>
<td class="text-start">
<template v-if="publicated">
<InfobaseURLEditor
v-if="url_edit"
:infobase_name="name"
:key="name"
:init_url="url"
@submit="apply_edit_url"
@cancel="cancel_edit_url"
/>
<a
class="text-break"
v-if="!url_edit"
v-bind:href="url_full"
target="blank"
>{{ url }}</a
<transition name="slide-fade" mode="out-in">
<InfobaseURLEditor
v-if="url_edit"
:infobase_name="name"
:key="name"
:init_url="url"
@submit="apply_edit_url"
@cancel="cancel_edit_url"
/> </transition
><transition name="fade-fast" mode="out-in">
<a
class="text-break"
v-if="!url_edit"
v-bind:href="url_full"
target="blank"
style="position: absolute"
>{{ url }}</a
></transition
>
</template>
</td>
<td class="text-end">
<div v-if="!url_edit && !is_locked" class="btn-group shadow" role="group">
<button
v-if="publicated"
type="button"
class="btn btn-warning"
@click="start_edit_url"
title="Изменить URL"
v-tooltip:left
>
Изменить
</button>
<button
v-if="publicated"
type="button"
class="btn btn-danger"
@click="remove_publication"
title="Снять с публикации"
v-tooltip:top
>
Отменить
</button>
<button
v-if="!publicated"
type="button"
class="btn btn-primary"
@click="add_publication"
title="Опубликовать базу"
v-tooltip:left
>
Публиковать
</button>
</div>
<ItemLoading v-if="is_locked" />
<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
v-if="publicated"
type="button"
class="btn btn-warning"
@click="start_edit_url"
title="Изменить URL"
v-tooltip:left
>
Изменить
</button>
<button
v-if="publicated"
type="button"
class="btn btn-danger"
@click="remove_publication"
title="Снять с публикации"
v-tooltip:top
>
Отменить
</button>
<button
v-if="!publicated"
type="button"
class="btn btn-primary"
@click="add_publication"
title="Опубликовать базу"
v-tooltip:left
>
Публиковать
</button>
</div>
<ItemLoading v-else /> </transition></template
></transition>
</td>
</tr>
</template>
@ -129,3 +137,38 @@ export default {
},
};
</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>