Vanishable JavaScript Library

This is a simple library that enables to make HTML elements vanish by applying a CSS class. The library animates the opacity of the element to create a fade out effect. The library also supports different modes to make the element vanish, but also hide it from the layout (i.e. using display: none;) to make the browser to recalculate the layout.

Why?

I was using this effect in several projects, so I decided to create a simple library that can be reused in different projects.

Usage

Include the CSS and JavaScript files in your HTML:

<link href="dist/vanish.min.css" rel="stylesheet">
<script src="dist/vanish.min.js"></script>

or use it from a CDN:

<link href="https://cdn.jsdelivr.net/gh/dealfonso/vanishable/dist/vanishable.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/dealfonso/vanishable/dist/vanishable.min.js"></script>

Then, add the data-vanishable attribute to the elements you want to make vanish, and use the vanish class to trigger the effect.

<div class="content" data-vanishable>
    <p>This content can be vanished.</p>
</div>
<button onclick="document.querySelector('.content').classList.toggle('vanish')">Vanish Content</button>

You can also specify the vanish mode using the data-vanish-mode attribute. The available modes are:

• opacity: The default mode, which fades out the element by changing its opacity.
• display: This mode is the same that opacity, but it also sets display: none; to remove the element from the layout.

This is because changing the opacity alone does not remove the element from the document flow, so it still takes up space in the layout. So in case of using flex or grid layouts, the space occupied by the vanished element will still be preserved, which may not be the desired effect. e.g. if using flexlayout and justify-content: between;, the remaining elements will not adjust their positions to fill the gap left by the vanished element.

<div class="content" data-vanishable data-vanish-mode="display">
    <p>This content can be vanished and hidden from the layout.</p>
</div>
<button onclick="document.querySelector('.content').classList.toggle('vanish')">Vanish Content</button>

Style Customization

It is also possible to customize other aspects of the vanish effect using CSS variables:

:root {
    --vanish-duration: 0.5s;
    --vanish-easing: ease;
}

Moreover, you can add custom styles to the vanish effect by adding your own CSS rules for the .vanish and .vanish-vanished classes, or [data-vanishable] selector. But remember to keep the transition properties for a smooth effect. For example:

[data-vanishable] {
    transition: all var(--vanish-transition-duration) var(--vanish-transition-easing) !important;
}
.vanish {
    transform: translateX(-100%);
}

Programmatic Usage

The library makes vanishable any object that contains the data-vanishable attribute. However, you can also make any element vanishable programmatically by calling the Vanishable function:

Vanishable(document.querySelector('.my-element'));

On the display Mode

When you make an element hide by changing the opacity, the element is still present in the document flow, so it still takes up space in the layout. This is of special relevance when using flex or grid layouts, as the space occupied by the vanished element will still be preserved.

E.g. if using flex layout and justify-content: between;, the remaining elements will not adjust their positions to fill the gap left by the vanished element.

E.g. if using flex layout and the opacity of an element that is before other elements is changed to 0, the remaining elements will not adjust their positions to fill the gap left by the vanished element.

In contrast, when using the display mode, the element is removed from the document flow, once it is vanished. This is done by setting its display property to none, so it does not take up any space in the layout. This way, the remaining elements will adjust their positions to fill the gap left by the vanished element.

You can check the example.html file to see how both modes work.

License

MIT License. See the LICENSE file for details.