From 355c6f99f70ca12b93eedbd14701419e5143f8c6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 9 Aug 2022 23:02:25 +0400
Subject: [PATCH] Add slot transition and transition group docs

---
 .../105-vue/content/101-advanced-topics/114-slots.md  | 10 +++++++++-
 .../content/101-advanced-topics/115-transition.md     | 11 ++++++++++-
 .../101-advanced-topics/116-transition-group.md       |  8 +++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/114-slots.md b/content/roadmaps/105-vue/content/101-advanced-topics/114-slots.md
index fa109e7c8..6b38a9791 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/114-slots.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/114-slots.md
@@ -1 +1,9 @@
-# Slots
\ No newline at end of file
+# Slots
+
+In some cases, we may want to pass a template fragment to a child component, and let the child component render the fragment within its own template. The `<slot>` element is a slot outlet that indicates where the parent-provided slot content should be rendered.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/components/slots.html'>Slots in Vue.js</BadgeLink>
+
+
+
diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/115-transition.md b/content/roadmaps/105-vue/content/101-advanced-topics/115-transition.md
index 3482b4dc8..0cc181e2d 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/115-transition.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/115-transition.md
@@ -1 +1,10 @@
-# Transition
\ No newline at end of file
+# Transition
+
+Vue offers two built-in components that can help work with transitions and animations in response to changing state:
+
+* `<Transition>` for applying animations when an element or component is entering and leaving the DOM. This is covered on this page.
+* `<TransitionGroup>` for applying animations when an element or component is inserted into, removed from, or moved within a `v-for` list. This is covered in the next chapter.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/built-ins/transition.html#transition'>Transition Component</BadgeLink>
+
diff --git a/content/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md b/content/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md
index 8c1063eed..3aaf513e2 100644
--- a/content/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md
+++ b/content/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md
@@ -1 +1,7 @@
-# Transition group
\ No newline at end of file
+# Transition Group
+
+`<TransitionGroup>` is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/guide/built-ins/transition-group.html'>TransitionGroup Component</BadgeLink>
+