AJAX 호출시 CSS 애니메이션이 작동하는 데 문제가 발생했습니다.

Question

웹 사이트를 만들 때 페이지가 처음 호출 될 때 CSS 애니메이션이 작동하도록 만들 수 있지만 AJAX 함수가 호출 될 때마다 호출되도록하고 싶습니다. 여기에 여기에

function XML(infoId) 
{ 
var xmlHttp = xmlHttpObjCreate(); 
    if (!xmlHttp) { 
     alert("The browser doesn't support this action."); 
     return; 
    } 

    xmlHttp.onreadystatechange=function() { 
     if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
      elemObj = document.getElementById('textbox'); 
      elemObj.innerHTML = xmlHttp.responseText; 
      elemObj.className = "bounceInUp"; 
      } 
    } 

    // Append GET data to identify which quote we want 
    var reqURL = "FILE_NAME_HERE_?infoId=" + infoId; 
    xmlHttp.open("GET", reqURL, true); 
    xmlHttp.send(); 
} 

작동 기능 여기

부르는의 예입니다 자바 스크립트 XML 호출라는 CSS 애니메이션 코드는 "bounceInUp"

#textbox { 
width: 100%; 
background-color: transparent; 
height: 200px; 
color: #0000FF; 
font-weight: bold; 
font-size: 22px; 
overflow: auto; 
padding: 10; 


-webkit-animation: bounceInUp 1200ms ease-out; 
-moz-animation: bounceInUp 1200ms ease-out; 
-o-animation: bounceInUp 1200ms ease-out; 
animation: bounceInUp 1200ms ease-out; 

} 

@-webkit-keyframes bounceInUp { 
    0%, 60%, 75%, 90%, 100% { 
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    0% { 
    opacity: 0; 
    -webkit-transform: translate3d(0, 3000px, 0); 
     transform: translate3d(0, 3000px, 0); 
    } 

    60% { 
opacity: 1; 
-webkit-transform: translate3d(0, -20px, 0); 
     transform: translate3d(0, -20px, 0); 
} 

    75% { 
-webkit-transform: translate3d(0, 10px, 0); 
     transform: translate3d(0, 10px, 0); 
} 

     90% { 
-webkit-transform: translate3d(0, -5px, 0); 
     transform: translate3d(0, -5px, 0); 
    } 

     100% { 
-webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    } 

@keyframes bounceInUp { 
    0%, 60%, 75%, 90%, 100% { 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    0% { 
opacity: 0; 
-webkit-transform: translate3d(0, 3000px, 0); 
     transform: translate3d(0, 3000px, 0); 
    } 

    60% { 
opacity: 1; 
-webkit-transform: translate3d(0, -20px, 0); 
     transform: translate3d(0, -20px, 0); 
    } 

    75% { 
-webkit-transform: translate3d(0, 10px, 0); 
     transform: translate3d(0, 10px, 0); 
    } 

    90% { 
-webkit-transform: translate3d(0, -5px, 0); 
     transform: translate3d(0, -5px, 0); 
    } 

    100% { 
-webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
} 


.bounceInUp { 
    -webkit-animation-name: bounceInUp; 
     animation-name: bounceInUp; 
} 

I 임 모든 코드에 대해 사과해야하지만 누군가가 나를 도와 주어야 할 모든 것이 여기에 있는지 확인하고 싶습니다. 따라서 CSS 기능이 호출 될 때가 아니라 페이지가 처음로드 될 때만 css 애니메이션이 실행됩니다.

Answer 1

이미 #textbox CSS 선택기를 통해 애니메이션이 첨부 된 것처럼 보입니다. 그리고 AJAX 호출은 #textbox 규칙을 통해 이미 텍스트 상자에 적용된 동일한 애니메이션 속성을 가진 것처럼 보이는 클래스 이름을 추가합니다.

애니메이션을 다시 시작하려면 AJAX 호출이 전송되기 전에 #textbox의 애니메이션 CSS 속성을 지워야한다고 생각합니다. 그러면 AJAX 호출이 애니메이션을 다시 적용합니다. 이 방법을 다양하게 사용할 수 있습니다. 머리 꼭대기에있는 하나는 애니메이션을 지우고 xmlHttp.send()를 수행하기 전에 #textbox에 해당 클래스 이름을 적용하는 별도의 클래스를 만드는 것입니다. 그러면 텍스트 상자가 다시 나타납니다 AJAX 호출의 성공 처리기가 애니메이션을 다시 적용하기 전에 애니메이션이 적용되지 않은 상태로 만듭니다.

단순화하기 위해 #textbox CSS 규칙에서 애니메이션 속성을 제거하고 애니메이션을 실행하려면 .bounceInUp 클래스 이름을 요소에 적용하고 제거하기 만하면됩니다. 나는 그것이 더 깨끗한 접근법이라고 생각한다.

Answer 2

당신은 classList를 사용할 수 있습니다

this.classList.remove('bounceInUp'); 
    this.classList.add('bounceInUp');     

클래스를 다시 적용하고 바운스 다시는 일어나지 만들 것입니다. setTimeout보다 더 간단하고 읽기 쉽습니다. 키 프레임을 사용하고 있으므로 classList으로 잘 처리됩니다. 각 IE10 이상에서 작동합니다.