Add slot transition and transition group docs

content/roadmaps/105-vue/content/101-advanced-topics/114-slots.md

@@ -1 +1,9 @@
-# Slots
+# 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>
+
+
+

content/roadmaps/105-vue/content/101-advanced-topics/115-transition.md

@@ -1 +1,10 @@
-# Transition
+# 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>
+

content/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md

@@ -1 +1,7 @@
-# Transition group
+# 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>
+