# el-transition

> Apply Enter/Leave Transitions

Latest version **0.0.7** (published 2020-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install el-transition
pnpm add el-transition
yarn add el-transition
bun add el-transition
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-09-10 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 215 |
| Author | Mike McCall |
| Maintainers | mmccall10 |
| Keywords | transition, enter, leave, css, animation |

## Links

- npm: https://www.npmjs.com/package/el-transition
- Repository: https://github.com/mmccall10/el-transition
- Homepage: https://github.com/mmccall10/el-transition#readme
- Issues: https://github.com/mmccall10/el-transition/issues
- npm.io page: https://npm.io/package/el-transition

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2020-09-10
- 0.0.6 — 2020-09-10
- 0.0.5 — 2020-09-10
- 0.0.4 — 2020-09-09
- 0.0.3 — 2020-09-08
- 0.0.2 — 2020-09-08
- 0.0.1 — 2020-09-08

## README

# el-transition

## Install
```bash
$ npm install el-transition
```

```
$ yarn add el-transition
```

## Purpose
The purpose of this package is to handle enter/leave transition using classes or data attributes. This is similar to the implementations you find in vue.js and alpine.js.

## Usage
Both class based and dataset attributes are supported. 

To hide and show elements an implemenation of the class `hidden` is required.  

```css
.hidden {
  display: none
}
```

`el-transition` exports three async functions `enter`, `leave`, and `toggle`. Each function expects an HTML DOM element as the first argument and optional transition name as the second. 

```js
// app.js
import {enter, leave, toggle} from 'el-transition'

function open() {
    enter(element).then(() => {
        console.log("Enter transition complete")
    })
}

// remove element when close
function close() {
    leave(element).then(() => {
        element.destroy();
    })
}

// calls enter or leave based on presence of the class hidden
function toggle() {
    toggle(element);
}
```

### Dataset Attributes
When using dataset attributes el-transtion expects the following.

* data-transtion-enter: Applied during the entire entering phase.
* data-transition-enter-start: Added before element is inserted, removed one frame after element is inserted.
* data-transition-enter-end: Added one frame after element is inserted (at the same time enter-start is removed), removed when transition/animation finishes.
* data-transition-leave: Applied during the entire leaving phase.
* data-transition-leave-start: Added immediately when a leaving transition is triggered, removed after one frame.
* data-transition-leave-end: Added one frame after a leaving transition is triggered (at the same time leave-start is removed), removed when the transition/animation finishes.


### Example 
```html
<!-- dropdown.html -->
<div class="relative inline-block text-left">
  <div>
    <span class="rounded-md shadow-sm">
      <button type="button" class="dropdown-button" id="dropdown-btn">
        Options
      </button>
    </span>
  </div>

    <!-- declare enter leave anmiations using data attributes -->
    <div id="dropdown-menu" class="menu hidden"
        data-transition-enter="transition ease-out duration-100"
        data-transition-enter-start="transform opacity-0 scale-95"
        data-transition-enter-end="transform opacity-100 scale-100"
        data-transition-leave="transition ease-in duration-75"
        data-transition-leave-start="transform opacity-100 scale-100"
        data-transition-leave-end="transform opacity-0 scale-95"
    >
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
        <!-- Menu links -->
      </div>
    </div>
  </div>
</div>
```

```js
import {enter, leave, toggle} from 'el-transition'

const dropdownMenu = document.getElementById("dropdown-menu")
const dropdownBtn = document.getElementById("dropdown-btn")

function openMenu() {
  enter(dropdownMenu)
}

function closeMenu() {
  leave(dropdownMenu)
}

function toggleDropdownMenu() {
    toggle(dropdownMenu)
}

dropdownBtn.addEventListener('click', toggleDropdownMenu)
```

### Transition Name Option
You may specificy a transition name and el-transtion will handle applying the inferred css classses at the each stage. If data attributes are set, those will take precedence.

Using the example transition name `dropdown` we need can declare a class per stage. 

* .dropdown-enter: Applied during the entire entering phase.
* .dropdown-enter-start: Added before element is inserted, removed one frame after element is inserted.
* .dropdown-enter-end: Added one frame after element is inserted (at the same time enter-start is removed), removed when transition/animation finishes.
* .dropdown-leave: Applied during the entire leaving phase.
* .dropdown-leave-start: Added immediately when a leaving transition is triggered, removed after one frame.
* .dropdown-leave-end: Added one frame after a leaving transition is triggered (at the same time leave-start is removed), removed when the transition/animation finishes.

```scss
// application.scss

.dropdown-enter {
  @apply transition ease-out duration-100;
}

.dropdown-enter-start {
  @apply transform opacity-0 scale-95;
}
 .dropdown-enter-end {
  @apply transform opacity-100 scale-100;
 }

.dropdown-leave {
   @apply transition ease-in duration-75;
 }

.dropdown-leave-start {
  @apply transform opacity-100 scale-100;
}

.dropdown-leave-end {
  @apply transform opacity-0 scale-95;
}
```

```html
<!-- dropdown.html -->
<div class="relative inline-block text-left">
  <div>
    <span class="rounded-md shadow-sm">
      <button type="button" class="dropdown-button" id="dropdown-btn">
        Options
      </button>
    </span>
  </div>

  <div id="dropdown-menu" class="menu hidden">
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
        <!-- Menu links -->
      </div>
    </div>
  </div>
</div>
```

```js
// app.js
import {enter, leave, toggle} from 'el-transition'

const dropdownMenu = document.getElementById("dropdown-menu")
const dropdownBtn = document.getElementById("dropdown-btn")

function openMenu() {
  enter(dropdownMenu, 'dropdown')
}

function closeMenu() {
  leave(dropdownMenu, 'dropdown')
}

function toggleDropdownMenu() {
    toggle(dropdownMenu, 'dropdown')
}

dropdownBtn.addEventListener('click', toggleDropdownMenu)
```

---
_Source: https://npm.io/package/el-transition · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._