el-transition

Install

`
$ yarn add el-transition
`

Purpose

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);
}
`

$3

`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)
`

$3

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



`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)
``