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
- Host: GitHub
- URL: https://github.com/drgarlic/svelte-class-transition
- Owner: drgarlic
- License: mit
- Archived: true
- Created: 2020-05-01T15:15:42.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-25T11:57:26.000Z (almost 5 years ago)
- Last Synced: 2024-09-18T14:55:24.358Z (9 months ago)
- Topics: animation, library, svelte, svelte3, tailwind, tailwindcss, transistions, transition
- Language: HTML
- Homepage: https://svelte-class-transition-examples.now.sh/
- Size: 13.7 KB
- Stars: 75
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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.