jquery 재생 CSS 애니메이션 문제 발생_jquery

최근 CSS 애니메이션을 하다가 애니메이션을 재생하기 위해 스크립트를 사용해야 하는 상황에 직면했습니다. 예:

css 애니메이션 코드

코드 복사 코드는 다음과 같습니다.

.seed_txt_out .seed_txt h2 {
애니메이션 이름: seed-h2;
애니메이션 시간: 2초;
애니메이션 지연: 0s; 🎜>애니메이션-반복 횟수:
애니메이션 방향:
애니메이션 재생 상태:
위치:
상위: 10px; >@keyframes seed -h2
{
{top: -120px;}
에서 {top: 10px;}
}


jquery 호출 재생

코드 복사

코드는 다음과 같습니다. $(".seed_txt_out").children("div ").removeClass("seed_txt "); $(".seed_txt_out").children("div").addClass("seed_txt");

이때, 애니메이션이 처음으로 표시되는 것을 확인하세요. 올바르게 재생되지만 두 번째에는 애니메이션이 재생되지 않습니다.

나중에 온라인으로 확인한 결과 해결 방법이 매우 간단하다는 것을 알았습니다. 요소를 복사하고 원본 요소를 제거한 다음 새 요소에 스타일을 추가하기만 하면 됩니다.

코드 복사

코드는 다음과 같습니다. $(opts.txt).children( "div" ).removeClass("seed_txt"); temp = $(opts.txt).children("div:eq(" $(this).parent("ul").children("li") .index( this) ")");

temp.clone(true);

temp.after(newDiv)
newDiv.addClass("seed_txt) ");


외국인을 위한 솔루션 링크입니다. 다른 상황도 언급됐다. 비슷한 문제에 직면한 친구들은 물론 영어로 참고할 수 있습니다.
http://css-tricks.com/restart-css-animation/