Velocity.js 일시 정지 및 재생 기능 정보
Velocity.js, 애니메이션시킬 때는 CSS로 이동하는 것보다 압도적인 성능 를 내는 것으로 매우 편리합니다만, 어떤 기능의 일본어 정보를 볼 수 없었으므로 여기에 기재합니다!
일시 정지 → 재생 기능
stop() 메소드는 있습니다만, 이른바 「일시정지→재생」하는 것의 문서 정보가 공식 사이트 가 없었습니다 (게다가 stop()라면 완전 정지해 버린다).
Github의 Issue에서 "일시 정지 재생 기능을 달아 달라고 부탁한다"는 이야기는있었습니다 만, 중요한 작가의 동기를 상실하고 있었으므로, 본인으로부터의 구현에는 기대가 0이되어, 그다지 범용적이지 않은 방법으로 일시정지·재생하는 기능을 붙이도록 하고 있었습니다.
See the Pen Velocity.js - Pause/Resume animation by William Lindner ( @wlindner ) on CodePen .
htps : // 코데펜. 이오 / w ぃ d 네 r / 펜 / y 키 zw
google 일본어 검색에서도 관련 기사를 볼 수 없었습니다.
그러나 한 명의 Contributior의 활약으로 2016년 11월에 일시정지 및 재생 기능이 구현되었습니다.
구현 예
$(function(){
$('.hover').velocity({
scale: [1, 0.6]
},
{
duration: 1500,
complete: function(){
$(this).velocity({
scale: [0.6, 1]
}, {
duration: 1500,
loop: true
});
}
});
$('.hover').hover(function(){
$(this).velocity('pause');
},function(){
$(this).velocity('resume');
});
});
데모
$(function(){
$('.hover').velocity({
scale: [1, 0.6]
},
{
duration: 1500,
complete: function(){
$(this).velocity({
scale: [0.6, 1]
}, {
duration: 1500,
loop: true
});
}
});
$('.hover').hover(function(){
$(this).velocity('pause');
},function(){
$(this).velocity('resume');
});
});
htps : // js 푹 dぇ. 네 t/g09jkr80/1/
얻은 교훈
공식 문서, 업데이트 정보는 제대로 조사하고 제대로 읽자! ! ! ! !
이상 배웠습니다.
여담이지만 React 용 velocity.js 플러그인이 있습니다.
htps : // 기주 b. 코 m / ぃ는 r-fb c / ゔ ぉ ty-re ct
오키나토코가 관리하고 있으므로 안심☺
Reference
이 문제에 관하여(Velocity.js 일시 정지 및 재생 기능 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yamanoku/items/23e56a428aaa4fad7040텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
