The jQuery plugin for Material Design hierarchical display animation effect
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Update demo images Aug 17, 2015
dist Update dist files to 1.0.1 Aug 17, 2015
grunt Add grunt files Aug 15, 2015
js Bump new version Aug 17, 2015
less Add LESS files Aug 15, 2015
scss Add SCSS files Aug 15, 2015
tests Update demo files Aug 17, 2015
.gitignore Add .gitignore Aug 14, 2015
Gruntfile.js Add grunt files Aug 15, 2015
LICENSE Initial commit Dec 21, 2014
README.md Update README Nov 16, 2015
bower.json Update Bower.json Aug 15, 2015
package.json Update NPM version Aug 17, 2015
zmd.hierarchical-display.jquery.json Add JSON file for plugins.jquery.com Aug 15, 2015

README.md

Material Design Hierarchical Display 1.0.1

![Latest Version](https://img.shields.io/github/release/zavoloklom/material-design-hierarchical-display.svg?style=flat-square&label=latest version) ![Software License](https://img.shields.io/badge/license-MIT License-blue.svg?style=flat-square) Total Downloads

NPM Dependency DevDependency Last Month Downloads

Material Design Hierarchical Display

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

Donate