我试图让动画在我的网页上工作以实现平滑的页面转换,不幸的是它根本不起作用(没有任何反应)
插件的 CSS 和 JS 都已加载。查询也一样。错误控制台不返回任何错误。
知道问题是什么吗?
谢谢,
HTML
<nav class="navbar-classic">
<li><a href="bootstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Who are we? </a>
<ul class="dropdown">
<li><a href="bootstrap.html" class="animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Sub 1</a></li>
<li><a href="bootstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Sub 2</a></li>
</ul>
</li>
<li><a href="bootstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Services Services Services</a>
</li>
<li><a href="bottstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Products Products Products</a>
</li>
</nav>
JS
$(document).ready(function() {
$(".animsition").animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
// e.g. linkElement: 'a:not([target="_blank"]):not([href^=#])'
loading: true,
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; }
});
});