Material Design Hierarchical Display 1.0.1
 
The jQuery plugin for Material Design 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.
Install
Download: 1.0.1 (ZIP)
Bower: bower install material-design-hierarchical-display
NPM: npm install material-design-hierarchical-display
Demo
Demo site.
All demo site files you can find here.
Usage
Add CSS and JS files to your page:
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="zmd.hierarchical-display.min.css"> <!-- You need to include jquery.zmd.hierarchical-display.js after jQuery. Requires jQuery 1.7+. --> <script src="jquery.js"></script> <!-- Compiled and minified JavaScript --> <script src="jquery.zmd.hierarchical-display.min.js"></script>Add elements that you want to display
<!-- It is parent element --> <div data-animation="hierarchical-display"> <!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts --> <div></div> <div></div> <div></div> </div>Via data attribute
Add data-animation="hierarchical-display" to parent element that contains children elements which you want to display - for display elements on page loads (on event document.ready).
Via JavaScript
Also you can activate plugin manually from JavaScript:
$('.zmd-hierarchical-display').hierarchicalDisplay();Toggle animation
If you want to toggle your animation you should add data-toggle="hierarchical-display" and a data-target to the control element to automatically assign control of a hierarchical displaying element. The data-target attribute accepts a CSS selector to apply the display to.
<!-- It is parent element --> <div id="parent" data-animation="hierarchical-display"> <!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts --> </div> <!-- This element will toggle animation --> <a href="#" data-toggle="hierarchical-display" data-target="#parent">Toggle animation</a>Documentation
Stylesheet
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.
Demo with animate.css on CodePen
Options
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.
####action: string
Method that should be executed when you call the plugin.
default: show
####speed: number
Plugin speed. You can use decimal values, for example: 0.1.
default: 5
####animationIn: string
Animation CSS class that should be added to displaying element when element is showing.
default: zoomIn
####animationOut: string
Animation CSS class that should be added to displaying element when element is hiding.
default: zoomOut
####debug: boolean
Spams your console with information about the events.
default: false
Methods
####.hierarchicalDisplay(options):
Initializes the plugin with an optional options object and starts working.
$('.zmd-hierarchical-display').hierarchicalDisplay({ speed: 10 })####.hierarchicalDisplay('show'):
Shows a displaying element.
####.hierarchicalDisplay('hide'):
Hides a displaying element.
####.hierarchicalDisplay('toggle'):
Toggles a displaying element to shown or hidden.
Events
Material Design Hierarchical Display plugin exposes a few events for hooking into displaying functionality.
####show.zmd.hierarchicalDisplay:
This event fires immediately when the show instance method is called.
####shown.zmd.hierarchicalDisplay:
This event is fired when a displaying element has been made visible to the user (will wait for CSS animations to complete).
####hide.zmd.hierarchicalDisplay:
This event fires immediately when the hide instance method is called.
####hidden.zmd.hierarchicalDisplay:
This event is fired when a displaying element has been hidden from the user (will wait for CSS animations to complete).
$('#myDisplayingElement').on('shown.zmd.hierarchicalDisplay', function () { // do something… })Version number
The version of plugin can be accessed via the VERSION property of the plugin's constructor:
$.fn.hierarchicalDisplay.Constructor.VERSION // => "1.0.1"Licence
The MIT License (MIT). Please see License File for more information.
Browser Support
- Chrome 4+
- Firefox 16+
- Opera 12.1+
- Safari 4+
- IE 10+
- Android Browser 4+
- Not supported in Opera Mini
Browser support specified in accordance to caniuse.com portal (you can check CSS3 2D Transforms and animation).
Changelog
v1.0.1:
- make some internal optimizations
Versioning
Material Design Hierarchical Display will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:
<major>.<minor>.<patch>
Author
- Email: [email protected]
- Twitter: https://twitter.com/zavoloklom
- GitHub: https://github.com/zavoloklom
- CodePen: http://codepen.io/zavoloklom
- Dribble: https://dribbble.com/zavoloklom
