jQuery plugin animsition 사용 소결
3251 단어 jquerypluginanimsition
다운로드 주소:https://github.com/blivesta/animsition
문서 주소:http://git.blivesta.com/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 에서 소결 을 사용 하여 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.