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中map函数的两种方式
Apr 07 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery冲突问题解决方法
Jan 19 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
mysql5写入和读出乱码解决
2006/11/25 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python实现数独算法实例
2015/06/09 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python3中的md5加密实例
2018/05/29 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
python链表类中获取元素实例方法
2021/02/23 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
运动会通讯稿200字
2014/02/16 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby