import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Utilities/Transitions/Docs"/>

# Transitions

Transitions are animations that help users understand the flow on a page. 
You can use our ready-to-use transition effects or modify them according to your needs.

Some of our components already have their own transitions for example:

<ul>
  <li>
    <a
    href="?path=/story/components-atoms-overlay--common"
    target="_self"
    >
      SfOverlay
    </a>
  </li>
  <li>
    <a
    href="?path=/story/components-molecules-notification--common"
    target="_self"
    >
      SfNotification
    </a>
  </li>
  <li>
    <a
    href="?path=/story/components-molecules-dropdown--common"
    target="_self"
    >
      SfDropdown
    </a>
  </li>
</ul>

## Available transitions in SFUI

 There are 5 available transitions:
  - `sf-fade`  
  - `sf-slide-left`
  - `sf-slide-right`
  - `sf-collapse-top`
  - `sf-collapse-bottom`

To use our transition you need to wrap an element that should have its special effect
in `transition` wrapper component and add desired SFUI transition name

```html
<transition name="sf-fade">
  <p v-if="show">Hello</p>
</transition>
```

For all of our transitions, we have separate story where you can see how it works.

## Changing transitions

If you would like to change exsisting transition, 
you can override classes that are responsible for the effects: 

- `.slide-enter-active`
- `.slide-leave-active`
- `.slide-enter`
- `.slide-leave-to` 

If you want to learn more about transitions in vue,
you can find useful information on the [Vue.js]("https://vuejs.org/v2/guide/transitions.html") page.