The jQuery plugin for hierarchical display animation effect
Hierarchical Timing is a meaningful transition introduced in Google Material Design that focuses your users attention in an app or how an app element got from point A to point B.
material-design-hierarchical-display archive into your project.<head> of your html, reference the location to your zmd.hierarchical-display.min.css.
<link rel="stylesheet" href="path/to/material-design-hierarchical-display/zmd.hierarchical-display.min.css">
<script src="path/to/material-design-hierarchical-display/jquery.zmd.hierarchical-display.min.js"></script>
You need to include jquery.zmd.hierarchical-display.js after jQuery. Requires jQuery 1.7+.
data-animation="hierarchical-display" to parent element that contains children elements which you want to display - for display elements on page loads.
Also you can activate plugin manually from JavaScript: $(elem).hierarchicalDisplay();
See the Pen Material Design Hierarchical Display + Animate.css by Sergey Kupletsky (@zavoloklom) on CodePen.
Documentation
The MD Hierarchical Display plugin utilizes a few classes to handle the heavy lifting:
.zmd-hierarchical-display hides the content..zmd-hierarchical-display.in shows the content..zmd-hierarchical-displaying is added when the animation starts, and removed when it finishes.These classes can be found in component.less.
You don't need to add the class zmd-hierarchical-display to the displaying element - it will be added automaticly. If you'd like it to default close, add class zmd-hierarchical-display, for default open, add the additional class in.
Also it require CSS animation from animation.less. But you can easily change it to your favorite animation library - for example animate.css.
See demo with animate.css on CodePen or on this page in demo section.
Documentation
All options of the plugin can be set via the corresponding data attributes, for example: data-speed for speed option or data-animation-in for animationIn option.
stringMethod that should be executed when you call the plugin.
default: show
numberPlugin speed. You can use decimal values, for example: 0.1.
default: 5
stringAnimation CSS class that should be added to displaying element when element is showing.
default: zoomIn
stringAnimation CSS class that should be added to displaying element when element is hiding.
default: zoomOut
booleanSpams your console with information about the events.
default: false
Documentation
Initializes the plugin with an optional options object and starts working.
$('.zmd-hierarchical-display').hierarchicalDisplay({
speed: 10
})
Shows a displaying element.
Hides a displaying element.
Toggles a displaying element to shown or hidden.
Documentation
Material Design Hierarchical Display plugin exposes a few events for hooking into displaying functionality.
This event fires immediately when the show instance method is called.
This event is fired when a displaying element has been made visible to the user (will wait for CSS animations to complete).
This event fires immediately when the hide instance method is called.
This event is fired when a displaying element has been hidden from the user (will wait for CSS animations to complete).
Browser support specified in accordance to caniuse.com portal (you can check CSS3 2D Transforms and animation).
MD Hierarchical Display plugin is licensed under the MIT license. (http://opensource.org/licenses/MIT)