1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/content_transition.vue b/app/assets/javascripts/vue_shared/components/content_transition.vue
new file mode 100644
index 00000000000..446610d6b91
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/content_transition.vue
@@ -0,0 +1,32 @@
+<script>
+export default {
+  props: {
+    currentSlot: {
+      type: String,
+      required: true,
+    },
+    slots: {
+      type: Array,
+      required: true,
+    },
+    transitionName: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    shouldShow(key) {
+      return this.currentSlot === key;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <transition v-for="{ key, attributes } in slots" :key="key" :name="transitionName">
+      <div v-show="shouldShow(key)" v-bind="attributes">
+        <slot :name="key"></slot>
+      </div>
+    </transition>
+  </div>
+</template>