jQuery plugin animsition使用小结


Posted in jQuery onSeptember 14, 2017

用法整理

下载地址:https://github.com/blivesta/animsition

文档地址:http://git.blivesta.com/animsition/

实现的效果是,各种不同效果的转场效果

jQuery plugin animsition使用小结

<div class="animsition">
  <div class="item bg-indigo">
   <h1>Animsition: Sandbox</h1>
  </div>
  <h2>Defaults</h2>
  <ol>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page1.html" rel="external nofollow" >Basic</a></li>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page2.html" rel="external nofollow" >Options</a></li>
  </ol>
 </div>

<script src="jquery-3.2.1.min.js"></script>
  <script src="js/animsition.js"></script>
 <script>
  $(document).ready(function() {
 $(".animsition").animsition({
  inClass: 'flip-in-y',
  outClass: 'flip-out-y',
  inDuration: 1500,
  // outDuration: 800,
  linkElement: '.animsition-link',
  // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
  loading: false,
  loadingParentElement: 'body', //animsition wrapper element
  loadingClass: 'animsition-loading',
  loadingInner: '', // e.g '<img src="loading.svg" />'
  timeout: false,
  timeoutCountdown: 5000,
  onLoadEvent: true,
  browser: [ 'animation-duration', '-webkit-animation-duration'],
  // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
  // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
  overlay : false,
  overlayClass : 'animsition-overlay-slide',
  overlayParentElement : 'body',
  // transition: function(url){ window.location.href = url;}
 });
});
  </script>

注意!!!css文件的.animistion类的opacity设置了为0;需要改过来,要不然页面元素看不到!!!

总结

以上所述是小编给大家介绍的jQuery plugin animsition使用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现日历效果
Sep 11 jQuery
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
React中jquery引用的实现方法
Sep 12 #jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
You might like
php像数组一样存取和修改字符串字符
2014/03/21 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
创新型城市实施方案
2014/03/06 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
产品售后服务承诺书
2014/05/21 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
处级干部考察材料
2014/12/24 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
MySQL创建索引需要了解的
2021/04/08 MySQL
详解Python requests模块
2021/06/21 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL