npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

animate-display-property

v2.0.1

Published

A JavaScript micro plugin to add transition effects for the CSS display property. This plugin uses CSS3 animations to acheive transition effects when an element's display property changes.

Downloads

13

Readme

Animate Display Property

A JavaScript micro plugin to add transition effects for the CSS display property. This plugin uses CSS3 animations to acheive transition effects when an element's display property changes.

As you all know that CSS3 transitions doesn't work for the display property and we switch between display: block/inline/flex and display: none to show and hide elements. I found it difficult in my projects to show and hide elements with transition effects. So I wrote this micro plugin to hide and show elements with effects.

Ofcourse, there are many libraries out there to acheive this and there are some CSS tricks as well like changing element's height, changing opacity, etc. But I wanted a precise solution with minimal code.

You can view the demo at the official webiste of the plugin.

Installation

You can download the latest version of the plugin from Github Releases or you can install from npm using the following command.

npm install animate-display-property --save

Quick Start

To use the plugin, you need to include the js and css files of the plugin in your html document.

<link type="text/css" rel="stylesheet" href="path/to/adp.css">
<script type="text/javascript" src="path/to/adp.js"></script>

Typically, to hide an element, we will get the element object and update display property with a value none. Here, use the hide method of the plugin which takes two mandatory arguments(element and animation effect).

var elemToHide = document.querySelector('.box');
ADP.hide(elemToHide, 'fade');

To show an element, use the show method of the plugin which is similar to the hide method.

var elemToShow = document.querySelector('.box');
ADP.show(elemToShow, 'fade');

The functionality of the hide method is that it first adds the animation effect for the element and when the animation completes adp-hide class is added which has display property with value none.

The functionality of the show method is that it first removes the adp-hide class from the element and then adds the animation effect. This plugin makes use of the animationend event to fire the callbacks which we will see in the next section.

There is also a toggle method which can be used to toggle between show and hide. The usage is same as the show and hide methods.

var elemToToggle = document.querySelector('.box');
ADP.toggle(elemToToggle, 'fade');

If an element is currently being animated to hide and show method is invoked for the element, then hide animation for the element will be cancelled and show animation will begin. This is same in vice versa as well.

Similarly, if an element is already visible and show method is called for the element, then animation will not be performed. This is same for the vice versa case as well.

Callbacks

The show, hide and toggle methods of the plugin also take an optional third parameter which is a callback function. This callback function will be fired on completion of show/hide.

var elemToShow = document.querySelector('.box');
ADP.show(elemToShow, 'fade', function (state) {
    console.log('Callback fired with ' + state);
});

The callback function takes an argument called state. The state represents what happened to the element when show/hide was called. The different states are as follows.

  • animation-complete - The intended action(show/hide) has completed with proper animation.

  • already-visible - This state will be returned when the element is already visible and show method is called for the element.

  • show-already-in-progress - This state will be returned when show animation is already in progress and show method is invoked for the element.

  • already-hidden - This state will be returned when the element is already hidden and hide method is called for the element.

  • hide-already-in-progress - This state will be returned when hide animation is already in progress and hide method is invoked for the element.

  • animation-cancelled - This state will be returned when an animation is cancelled. Cancellation of animation happens when an animation is in progress for showing/hiding the element and the opposite action is performed on the element. Example - Hide method is called for an element and when the hiding animation is in progress, show method is called for the same element. In this case, hide animation will be cancelled midway and callback of hide method will be invoked with animation-cancelled state. Once hide aimation is cancelled, show animation will be performed on the element.

Effects

You can apply any kind of animation effect using this plugin and adp.css file contains some basic animation effects.

You can also create your own animation effects and use them with the plugin. The following is the CSS for a sample fade animation effect.

@keyframes fade-adp-show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-adp-hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-adp-show, .fade-adp-hide {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.fade-adp-show {
    animation-name: fade-adp-show;
}

.fade-adp-hide {
    animation-name: fade-adp-hide;
}

In the above code, the name of the animation is fade and you need to add two keyframe rules(one for the hiding effect and other for showing effect). The syntax for the animation names are [animation-name]-adp-show and [animation-name]-adp-hide.

Then, you need to write animation styles for two classes([animation-name]-adp-show and [animation-name]-adp-hide) which will be used by the adp.js file to perform the animations.

If you are not using any of the animation effects provided in the adp.css file, then feel free to ignore the file completely. In that case, you have to add the following CSS code somewhere in your styles.

.adp-hide {
    display: none !important;
}

You can also use two different animation effects for showing and hiding the element.

var elemToHide = document.querySelector('.box');
ADP.hide(elemToHide, 'fade'); // fade effect is used when hiding the element.
var elemToShow = document.querySelector('.box');
ADP.show(elemToShow, 'slide-left'); // slide-left effect is used when showing up the element.

License

MIT