animations

src/components/InfobaseListItem.vue

@@ -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>