Add slot transition and transition group docs

pull/1657/head
Kamran Ahmed 2 years ago
parent 5018b0bf69
commit cd406a0951
  1. 10
      content/roadmaps/105-vue/content/101-advanced-topics/114-slots.md
  2. 11
      content/roadmaps/105-vue/content/101-advanced-topics/115-transition.md
  3. 8
      content/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.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>

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

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

Loading…
Cancel
Save