animations

src/components/InfobaseListItem.vue

@@ -4,6 +4,7 @@
     <td class="text-center">{{ name }}</td>
     <td class="text-start">
       <template v-if="publicated">
+        <transition name="slide-fade" mode="out-in">
           <InfobaseURLEditor
             v-if="url_edit"
             :infobase_name="name"
@@ -11,18 +12,24 @@
             :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">
+      <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"
@@ -54,7 +61,8 @@
                 Публиковать
               </button>
             </div>
-      <ItemLoading v-if="is_locked" />
+            <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>