Move absolute positioning to animation class

- remove class from index
- remove class from list
- remove class from details
- add positionAbsolute to animation classes

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -199,10 +199,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-gl-resize-observer="handleResize"
-    class="my-3 position-absolute w-100 slide-enter-to-element"
-  >
+  <div v-gl-resize-observer="handleResize" class="my-3 w-100 slide-enter-to-element">
     <div class="d-flex my-3 align-items-center">
       <h4>
         <gl-sprintf :message="s__('ContainerRegistry|%{imageName} tags')">

app/assets/javascripts/registry/explorer/pages/index.vue

@@ -3,7 +3,7 @@ export default {};
 </script>
 
 <template>
-  <div class="position-relative">
+  <div>
     <transition name="slide">
       <router-view />
     </transition>

app/assets/javascripts/registry/explorer/pages/list.vue

@@ -78,7 +78,7 @@ export default {
 </script>
 
 <template>
-  <div class="position-absolute w-100 slide-enter-from-element">
+  <div class="w-100 slide-enter-from-element">
     <gl-empty-state
       v-if="config.characterError"
       :title="s__('ContainerRegistry|Docker connection error')"

app/assets/stylesheets/framework/vue_transitions.scss

@@ -15,6 +15,7 @@
 .slide-enter-from-element {
   &.slide-enter,
   &.slide-leave-to {
+    position: absolute;
     transform: translateX(-150%);
   }
 }
@@ -22,6 +23,7 @@
 .slide-enter-to-element {
   &.slide-enter,
   &.slide-leave-to {
+    position: absolute;
     transform: translateX(150%);
   }
 }