Slide transition - horizontal

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

Import

Both NSlideTransitionHorizontal and NSlideTransitionGroupHorizontal can be used to animate width.

import {NSlideTransitionHorizontal, NSlideTransitionGroupHorizontal} from '@nova-org/components'

Usage - single

Slide transition (horizontal) animates element's:

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

Code

Template

<template>
  <n-checkbox v-model="modelValue" label="Show button right" class="n-mr-4"/>

  <n-slide-transition-horizontal>
    <n-button v-if="modelValue" label="Button"/>
  </n-slide-transition-horizontal>
</template>

Script

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

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

Usage - multiple

NSlideTransitionGroupHorizontal can be used to animate width (including padding and margin) of multiple child elements.

Select visible icons

Code

Template

<template>
  <n-options-group label="Select visible icons">
    <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>

  <div class="multiple__btn-container n-mt-8">
    <n-slide-transition-group-horizontal>
      <n-icon v-if="modelValue.includes('solo')" name="vuesax/linear/map" size="40px" title="Solo travel"/>
      <n-icon v-if="modelValue.includes('backpacking')" name="vuesax/broken/shopping-bag" size="40px" title="European Backpacking"/>
      <n-icon v-if="modelValue.includes('cruise')" name="vuesax/linear/ship" size="40px" title="Caribbean Cruise"/>
    </n-slide-transition-group-horizontal>
  </div>
</template>

Script

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

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

Style

<style scoped lang="scss">
.multiple__btn-container {
  display: flex;
  gap: $n-space-8;
  align-items: center;
}
</style>

API

Props

PropertyTypeDefault valueDescription

Slots

SlotDescription