實例分享jQuery plugin animsition使用小結
- 小云云原創
- 2017-12-29 09:20:342573瀏覽
不知道大家對 plugin animsition有多少了解，本文透過實例代碼給大家分享了jQuery plugin animsition用法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能幫助到大家。
用法整理
實現的效果是，各種不同效果的轉場效果
<p class="animsition">
<p class="item bg-indigo">
<h1>Animsition: Sandbox</h1>
</p>
<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>
</p>
<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使用小結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn