使用 jQuery 和 CSS3 将高度/宽度动画化为自动 - cssAnimateAuto

使用 jQuery 和 CSS3 将高度/宽度动画化为自动 - cssAnimateAuto

版本:

浏览量:185

最后更新:2021-09-07

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

cssAnimateAuto 是一个有用且功能强大的 jQuery 插件,它利用 CSS3 转换将 Html 元素的高度/宽度动画化为“自动”。使用 cssAnimateAuto 插件,您可以轻松创建灵活的手风琴菜单、可切换的容器或具有动画展开/折叠效果的下拉菜单。

基本用法:

1. 创建一个具有自动高度的可折叠容器。

<div id="demo" class="content">
YOUR CONTENT GOES HERE
</div>

2. 创建一个按钮来切换容器。

<button id="trigger">Open</button>

3. 使用所有默认选项调用插件。

$('#trigger').click(function() {
$('#demo').cssAnimateAuto();
});

4. 选项。

$('#trigger').click(function() {
$('#demo').cssAnimateAuto({
// any CSS transition (shorthand) prop
transition: 'height 0.3s',
 
// or 'open' or 'close'
action: 'toggle',
 
openClass: 'is-opened',
eventNamespace: 'cssaa',
 
// any height value
to: false
});
});

更改日志:

v0.4.0 (2015-08-05)

  • 截至日期的依赖

v0.3.3 (2015-06-08)

  • Fix-iOS6-TransitionEnd --> 3spin-dev-Fix-iOS6-TransitionEnd

v0.3.3 (2015-01-25)

  • 修复了this在回调函数中使用插件时的问题。

  • 修复了 iOS6 的 webkitTransition 检测

v0.2.5 (2014-01-13)

  • 小改进,新版本

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。