An open API service indexing awesome lists of open source software.

https://github.com/drgarlic/svelte-class-transition

:fireworks: A very simple Svelte 3 component that allows you to do transitions using CSS classes
https://github.com/drgarlic/svelte-class-transition

animation library svelte svelte3 tailwind tailwindcss transistions transition

Last synced: 5 months ago
JSON representation

:fireworks: A very simple Svelte 3 component that allows you to do transitions using CSS classes

Awesome Lists containing this project

README

        

# svelte-class-transition

`svelte-class-transition` is a very simple Svelte 3 component that allows you to do transitions using CSS classes.

You can find multiple examples with different use cases here: https://svelte-class-transition-examples.now.sh/

## Install

Using `yarn`:

```
yarn add svelte-class-transition
```

Using `npm`:

```
npm install svelte-class-transition
```

## Usage

### Implementation

Here's how it should be used:

```html

import Transition from 'svelte-class-transition';

export let toggle;



...

```

### Props

`svelte-class-transition` has several props for different use cases. All of them are optionnal but without any, the component won't do anything.

#### `toggle`

Type: `boolean | undefined`

Default value: `undefined`

The `toggle` property is where you'll store your toggling variable. If set to `true` the `slot` will be first visible, if set to `false` it will start hidden, you should note that there is **no animation for the first state**. On change of the property, the `slot` will animate according to the other props.

There is a possiblity to not set this property:

- If the component has a parent (or grand*-parent) transition component, it will listen to its changes and react according to them. The parent (or grand*-parent) transition component will wait until all the animations are finished before being hidden.
- If the component doesn't have a parent (or grand*-parent) transition component, it will show the slot **with an animation once the DOM has fully loaded**.

#### `inState`

Type: `string`

Default value: `''`

The `inState` property is the state from which the `slot` while come from when setting the `toggle` to `true`. If you want your component to go from `opacity-0` to `opacity-100`, you should set `inState` to `opacity-0`.

#### `onState`

Type: `string`

Default value: `''`

The `onState` property is the state from which the `slot` while go to when setting the `toggle` to `true`. If you want your component to go from `opacity-0` to `opacity-100`, you should set `onState` to `opacity-100`.

#### `outState`

Type: `string`

Default value: `inState`

The `outState` property is the state from which the `slot` while go to when setting the `toggle` to `false`. If you want your component to go from `opacity-100` to `opacity-0`, you should set `outState` to `opacity-0`. If you want the same `inState` and `outState`, you can skip this prop.

#### `inTransition`

Type: `string`

Default value: `''`

The `inTransition` property is the transition the `slot` will use after `toggle` has been set to `true`. You'll want to set here the transition, the easing, the duration and eventually the delay. For example it could be: `transition ease-out duration-300`.

#### `outTransition`

Type: `string`

Default value: `inTransition`

The `outTransition` property is the transition the `slot` will use after `toggle` has been set to `false`. You'll want to set here the transition, the easing, the duration and eventually the delay. For example it could be: `transform ease-in duration-200`. If you want the same `inTransition` and `outTransition`, you can skip this prop.

#### `transitions`

Type: `string`

Default value: `''`

The `transitions` property is where you'll regroup your common classes from `inTranstion` and `outTransition`, like for example the transition property. It's totally optionnal and doesn't change anything inside the component, it's here to make your code look cleaner.

#### `offVisible`

Type: `boolean`

Default value: `false`

The `offVisible` property is where you'll define if the `slot` should be `hidden` when off or not.