Transitions ​

Anu provides useful transitions for your application and it also uses it internally. You can transition of most of the components to any of the transitions provided by Anu.

Additionally, you can also create your own transitions via createTransition function provided by Anu.

Transitions components in Anu has pattern A<transition-name>Transition (e.g. AFadeTransition) and transition name will be used as the name of the transition. For example, If you create a transition component for bounce createTransition('bounce') then name it ABounceTransition and you can use it as <SomeComponent transition="bounce">. Don't forget to write the styles for this transition.

Transition names are adopted from Vuetify as it has perfect names because these names are even compatible with logical directions.

Do note that, these transitions however isn't similar to vuetify's in terms of implementation and transition as well. This is because we followed graph directions to implement these transitions.

Y

X

In above graph, if we go in Y direction, then we have to move up so our Slide Y & Scroll Y transitions will start from bottom and will move up. Similarly, if we go in X direction, then we have to move right so our Slide X & Scroll X transitions will start from left and will move right.

Demo ​

<script lang="ts" setup>
const transitions = [
  { title: 'Fade', name: 'fade', icon: 'i-bx-border-none' },
  { title: 'Scale', name: 'scale', icon: 'i-bx-fullscreen' },
  { title: 'Slide Y', name: 'slide-y', icon: 'i-bx-up-arrow-alt' },
  { title: 'Slide Y Reverse', name: 'slide-y-reverse', icon: 'i-bx-down-arrow-alt' },
  { title: 'Scroll Y', name: 'scroll-y', icon: 'i-bx-chevrons-up' },
  { title: 'Scroll Y Reverse', name: 'scroll-y-reverse', icon: 'i-bx-chevrons-down' },
  { title: 'Slide X', name: 'slide-x', icon: 'i-bx-right-arrow-alt' },
  { title: 'Slide X Reverse', name: 'slide-x-reverse', icon: 'i-bx-left-arrow-alt' },
  { title: 'Scroll X', name: 'scroll-x', icon: 'i-bx-chevrons-right' },
  { title: 'Scroll X Reverse', name: 'scroll-x-reverse', icon: 'i-bx-chevrons-left' },
]
</script>

<template>
  <div class="grid grid-cols-2 place-items-start gap-y-18">
    <template
      v-for="{ title, name, icon } in transitions"
      :key="name"
    >
      <ABtn :icon="icon">
        <ATooltip
          class="capitalize"
          :transition="name"
          :text="`${title} Transition`"
        />
        {{ title }}
      </ABtn>
    </template>
  </div>
</template>

You can also customize the transition duration and timing via CSS variables.

If you want to change the duration of fade transition then you can override --fade-opacity-duration CSS var and if you want to change the timing function then you can override --fade-opacity-timing CSS var.

Similarly, If some transition has multiple transitions going on then you can override --<transition-name>-<property>-duration and --<transition-name>-<property>-timing CSS vars. For example, for slide-x transition you can override --slide-x-transform-duration and --slide-x-transform-timing CSS vars.

Apart from this, You can even change the transitioning value in case of transitions like slide-x via --slide-x-transform-translateX CSS var.

<template>
  <div class="flex flex-wrap gap-6">
    <ABtn>
      <ATooltip
        class="[--slide-y-translateY:14px]"
        transition="slide-y"
        text="Slide Y Transition"
      />
      Customized Slide Y
    </ABtn>
  </div>
</template>

Anu provides createTransition composable to create your own transition components that you can reuse. This composable takes a transition name as an argument and returns a transition component.

import { createTransition } from 'anu-vue'

export const AFadeTransition = createTransition('fade')

You have transition component now, but you have to write the styles for it. You can write the styles for your transition component in the same way as you write for any other transition.

Here's example of fade transition styles used in anu.

// 👉 Fade
$transition-name: 'fade';
.#{$transition-name} {
  &-move,
  &-enter-active,
  &-leave-active {
    transition: opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
  }

  &-enter-from,
  &-leave-to {
    opacity: var(--#{$transition-name}-opacity, 0);
  }

  // Transition group
  @at-root {
    &-group {
      .#{$transition-name}-leave-active {
        position: absolute;
        inset: 0;
      }
    }
  }
}