material-design-hierarchical-display是一款Material Design风格分层显示动画jQuery插件。该插件关注的是某个元素从A点移动到B点的过渡动画效果。
安装
可以使用NPM或Bower来安装该插件。
bower install material-design-hierarchical-display npm install material-design-hierarchical-display
使用方法
使用该插件需要引入jQuery1.7+、zmd.hierarchical-display.min.js和zmd.hierarchical-display.min.css文件。
<link rel="stylesheet" href="zmd.hierarchical-display.min.css"> <script src="jquery.js"></script> <script src="jquery.zmd.hierarchical-display.min.js"></script>
HTML结构
该Material Design风格分层动画插件的HTML结构如下:
<!-- 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>
初始化插件
通过data属性来初始化
可以在父容器元素上添加一个data-animation="hierarchical-display"
属性来初始化该插件。
通过JavaScript来初始化
也可以通过JavaScript来初始化插件。
$('.zmd-hierarchical-display').hierarchicalDisplay();
切换动画显示
如果你需要切换动画的显示,可以在链接元素上添加data-toggle="hierarchical-display"
和data-target="#parent"
,data-target
接收的是一个CSS选择器。
<!-- 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>
配置参数
以下的所有属性都可以通过data-*
属性来设置。例如:speed
属性可以使用data-speed
属性来设置。
-
action
:插件被调用是执行的方法,默认值为show
。 -
speed
:速度。可以使用小数,默认值为5。 -
animationIn
:当前元素显示时的CSS动画class类,默认值为zoomIn
。 -
animationOut
::当前元素隐藏时的CSS动画class类,默认值为zoomOut
。 -
debug
:是否在控制台上显示事件信息。
方法
hierarchicalDisplay(options)
:初始化插件并传入参数对象。
$('.zmd-hierarchical-display').hierarchicalDisplay({ speed: 10 })
hierarchicalDisplay('show')
:显示当前动画元素。hierarchicalDisplay('hide')
:隐藏当前动画元素。hierarchicalDisplay('toggle')
:切换当前动画元素的可见状态。事件
该Material Design风格分层显示动画插件有以下一些可用的事件。
show.zmd.hierarchicalDisplay
:当show
方法被使用的时候该方法被调用。shown.zmd.hierarchicalDisplay
:该方法在动画元素已经显示后被调用。hide.zmd.hierarchicalDisplay
:当hide
方法被使用的时候该方法被调用。hidden.zmd.hierarchicalDisplay
:该方法在动画元素已经隐藏后被调用。事件使用示例:
$('#myDisplayingElement').on('shown.zmd.hierarchicalDisplay', function () { // do something… })
该插件的github地址为:https://github.com/zavoloklom/material-design-hierarchical-display
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!