Slide transition - vertical

Slide transition (vertical) provides a simple way to animate height of single or multiple components or HTML elements when using conditional rendering.

Import

Both NSlideTransition and NSlideTransitionGroup can be used to animate width.

import {NSlideTransition, NSlideTransitionGroup} from '@nova-org/components'

Usage - single

Slide transition (vertical) animates element's:

• Height
• Margin (top, bottom)
• Padding (top, bottom)
• Flex gap - when an element is placed inside a flexbox element with a gap property set, it will also animate it

Small

Modern and responsive.

Code

Template

<template>
  <n-checkbox v-model="modelValue" label="Show card bellow"/>

  <n-slide-transition>
    <n-card v-if="modelValue" size="sm">
      <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Small'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
    </n-card>
  </n-slide-transition>
</template>

Script

<script setup lang="ts">
import {NCard, NCheckbox, NSlideTransition, NText} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref<boolean>(true)
</script>

Usage - multiple

NSlideTransitionGroup can be used for animating height (including padding and margin) of multiple child elements.

Select visible cards

Solo travel

Traveling solo to remote destinations

European Backpacking

Backpacking across Europe on a budget

Caribbean Cruise

Going on a luxury cruise to the Caribbean

Code

Template

<template>
  <n-options-group label="Select visible cards">
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
  </n-options-group>

  <n-slide-transition-group>
    <n-card v-if="modelValue.includes('solo')" size="sm">
      <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Solo travel'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Traveling solo to remote destinations'"/>
    </n-card>
    <n-card v-if="modelValue.includes('backpacking')" size="sm">
      <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'European Backpacking'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Backpacking across Europe on a budget'"/>
    </n-card>
    <n-card v-if="modelValue.includes('cruise')" size="sm">
      <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Caribbean Cruise'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Going on a luxury cruise to the Caribbean'"/>
    </n-card>
  </n-slide-transition-group>
</template>

Script

<script setup lang="ts">
import {NCard, NCheckbox, NText, NOptionsGroup, NSlideTransitionGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref<string[]>(['solo', 'backpacking', 'cruise'])
</script>

API

Props

PropertyTypeDefault valueDescription

Slots

SlotDescription