https://github.com/markusand/entreacte
Create fancy enter/leave animations in page elements, when switching between vue-router views.
https://github.com/markusand/entreacte
Last synced: about 1 year ago
JSON representation
Create fancy enter/leave animations in page elements, when switching between vue-router views.
- Host: GitHub
- URL: https://github.com/markusand/entreacte
- Owner: markusand
- License: isc
- Created: 2024-05-11T02:05:28.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-11T15:48:56.000Z (about 2 years ago)
- Last Synced: 2025-05-29T18:57:17.259Z (about 1 year ago)
- Language: TypeScript
- Size: 98.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Entreacte. Vue 3 router animations
Create fancy enter/leave animations in page elements, when switching between vue-router views.
Entreacte is the catalan word for *Entr'acte*, a pause between two parts of a stage production where curtains are being closed for set or costume changes.
[](https://npmjs.org/package/entreacte)
[](https://npmjs.org/package/entreacte)
[](https://npmjs.org/package/entreacte)
## Usage
Install the Entreacte plugin, passing the router object as a parameter and optional global options.
```bash
npm i entreacte
```
```js
import router from './router';
import entreacte from 'entreacte';
app.use(entreacte, { router });
```
Import default animations or create your own. Fade animation is imported by default. Animations are a pair of `*-enter` and `*-leave` steps.
```js
import 'entreacte/dist/animate/reveal.css;
```
```css
@keyframes mycustom-enter {
from {
opacity: 0;
transform: rotate(180deg) translateX(100%) scale(0.5);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes mycustom-leave {
from {
opacity: 1;
transform: none;
}
to {
opacity: 0;
transform: rotate(360deg) translate(-100%, 50%) scale(1.5);
}
}
```
Assign an animation to any element by defining custom data attributes or a vue directive instead.
Other parameters such as duration and delay, both for enter and leave steps, can be defined using argument or a deep nested object as value.
```html
```
## Examples
```html
```