其他代码
多个元素CSS3过渡效果插件
PetitQ
AnimateTransition 是一款允许在多个元素之间制作 CSS3 过渡效果的 js 插件。该过渡效果插件可以在不同的场合中使用，可以用于制作页面过渡效果，也可以用于制作各种模态窗口。该 CSS3 过渡效果插件通过使用硬件加速的 CSS 转换功能来增强其性能。它提供了 12 种预置的 blocks 动画过渡效果，和 8 种弹出模态窗口的过渡效果。该 CSS3 过渡效果插件没有任何外部依赖，它可以在所有的现代浏览器中运行，包括：Firefox 31+, Chrome 31+, Safari 7+, Opera 27+, IE 10+, iOS Safari 6.0+, Android Browser 2.3+。和其他的 CSS 过渡效果动画库不同（每次只执行一个元素的过渡效果），AnimateTransition 允许你在两个或多个元素之间进行过渡动画。它单独提供了一些样式和回调函数来确保过渡效果的正确执行。与使用纯 CSS 来制作动画过渡效果相比较，该插件提供了一个助手，可以帮助你在所有的浏览器中实现回调函数。它的各种预置动画都是经过优化的，能良好的工作。
使用方法
使用该 CSS 动画过渡效果插件要引入 animateTransition.min.js 和 transitions.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="transitions.css"/>
<script src="animateTransition.min.js"></script>
应用举例
在两个 Block 之间进行过渡动画。
AnimateTransition({
container: '.container',
blockIn: '.newElement',
blockOut: '.oldElement',
animation: 'slide-in'
});
显示模态
AnimateTransition({
container: '.container',
blockIn: '.popup',
animation: 'popup-scale-in'
});
隐藏模态
AnimateTransition({
container: '.container',
blockOut: '.popup',
animation: 'popup-scale-out'
});
Github 参考：https://github.com/Rapid-Application-Development-JS/AnimateTransition
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
