나는 전문 개발자가 아닙니다. 나는 약간의 도움을 찾고 있었다.
저는 toggleClass를 사용하여 div를 앞뒤로 움직이려고했습니다.
$('div').on('click', function() {
$(this).toggleClass('active');
});
및 키 프레임;
.active {
animation-name: moveme;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes moveme {
0% {transform: translate(0,0)}
50% {transform: translate(-200px, 0px)}
100% {transform: translate(-200px,-50px);}
}
이제 div가 이전 위치로 돌아갈 때 애니메이션이 적용되지 않습니다. div가 동일한 애니메이션을 사용하지만 거꾸로 애니메이션을 적용하고 싶습니다. 어떻게 할 수 있습니까?
여기에서 제가 jsfiddle.net/jmrMW/43/ 을 수행하려는 작업을 확인할 수 있습니다 . 예제를 위해 간단한 애니메이션을 만들었지 만 앞으로는 더 복잡해질 것입니다.
미리 감사드립니다 ^^
Javascript는 즉시 클래스를 추가하고 제거합니다. 그리고 CSS는 애니메이션을 .active클래스 에만 바인딩 하므로 두 번째 클릭하면 클래스가 느슨해집니다. 약간의 애니메이션이 느슨해집니다.
이제 사람들이 제 앞에서 언급 한대로 모든 것을 복제 할 수 있습니다.하지만 어서! 프로그래머는 복제하지 않고 활용합니다. CSS3 애니메이션의 모든 힘을 발견하는 것이 좋지 않습니까?
설정 : 그래서, 나는 또 다른 접근 방법을 제안하고자 animation-direction: alternate하고 animation-play-state: paused. 그런 다음 이동을위한 CSS 클래스를 정의합니다.
.moving {
animation-play-state: running;
}
그런 다음 클릭 한 후 1 초 동안 만 해당 요소에 적용합니다.
var $moveable = $( '.moveable' ).eq( 0 );
$moveable.click(function() {
$moveable.addClass( 'moving' );
setTimeout(function() {
$moveable.removeClass( 'moving' );
}, 1000);
});
최신 정보
이 솔루션에는 큰 단점이 있습니다. JS와 CSS 모두에서 확실히 일치하지 않는 타이머를 사용하는 것입니다. 애니메이션은 이제 무한하므로 매번 예상보다 조금 더 나아갑니다. 그러나 animation-iteration-count다음 주기로 진행되는 애니메이션을 비활성화하도록 증가시킬 수 있습니다 . 여전히 재미 있기를 바랍니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다