Built‐In Components - sana028/VueLearningsPoc GitHub Wiki

In vue js we have few built in components which are used to change the components appear <Transition> :

`<Transition>` is a built-in component: this means it is available in any component's template without having to importing it. It is used to apply enter and leave animations on elements or components.
 at enter or leave we can do transition based on conditional render 

• Conditional rendering via v-if
• Conditional display via v-show
• Dynamic components toggling via the special element
• Changing the special key attribute

  <Transition>
    <p v-if="exists">hello</p>
</Transition>

<Transitiongroup> : Provides transition effects for multiple elements or components in a list.it have same events like transition.

<TransitionGroup> supports the same props, CSS transition classes, and JavaScript hook listeners as <Transition>, with the following differences:

By default, it doesn't render a wrapper element. But you can specify an element to be rendered with the tag prop.

Elements inside are always required to have a unique key attribute.

CSS transition classes will be applied to individual elements in the list, not to the group / container itself.

<KeepAlive> : The built-in <KeepAlive> component is used around dynamic components to cache the components when they are not active, so that their state is kept.

 ###  ex: 
   <KeepAlive>
      <component :is="active-comp"/>
     </keepAlive>

when we are doing like above if we any component is active and we changed that component to other at the time it will cache the state of that deactivating component

<TelePort> : The built-in component is used with the to prop to move an element out of the current HTML structure and into another element already mounted in the DOM.