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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
一次编写,随处运行
2006/10/09 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php构造函数的继承方法
2015/02/09 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
angular动态表单制作
2018/02/23 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
python批量提取word内信息
2015/08/09 Python
python实现Floyd算法
2018/01/03 Python
python下载微信公众号相关文章
2019/02/26 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python的help函数如何使用
2020/06/11 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
怎样写好自荐信和推荐信
2013/12/26 职场文书
查环查孕证明
2014/01/10 职场文书
团组织关系介绍信
2014/01/12 职场文书
优秀幼教自荐信
2014/02/03 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
vue修饰符.capture和.self的区别
2022/04/22 Vue.js