아이템을 제거 할 때 animate.css로 애니메이션 재생

나는이 CSS 파일 http://daneden.github.io/animate.css/을 사용하여 내가 제작하고있는 웹 사이트에 애니메이션을 추가하고 있습니다. 예를 들어, 목록에서 항목을 삭제할 때 애니메이션을 재생해야하지만 요소가 더 이상 DOM에 없기 때문에 어떻게해야합니까?아이템을 제거 할 때 animate.css로 애니메이션 재생

$.ajax({ 
    type: "GET", 
    url: "message/delete/" + id, 
    dataType: "json", 
    success: function(response) { 
     if (response.status == "OK") { 
     $row.addClass('animated flipOutX'); 
       // Here I need to run an animation before I delete the item. 
     $('#messageTable tr#' + id).remove(); 
     } 
    } 
});

당신의 도움에 대해 다시 한번 감사드립니다 :

<tbody class="filter"> 
    <c:forEach var="message" items="${messages}"> 
     <tr id="${message.id}" class="body"> 
      <td>${message.name}</td> 
      <c:choose> 
      <c:when test="${not empty message.file}"><td>${message.file.name}</td></c:when> 
      <c:otherwise><td>${message.tts}</td></c:otherwise> 
      </c:choose> 
     <td class="icon"><i id="delete" class="icon-trash icon-hover"></i></td> 
     </tr> 
    </c:forEach> 
</tbody>

그리고 어떤 jQuery를 :

출처

2014-03-06 user2490936

실행 애니메이션 당신이 실제로 삭제하기 전에? – iamthereplicant

안녕하세요, 이미 시도했지만 예상대로 작동하지 않았습니다. 설명 : 일부 행이있는 테이블이 있는데 항목을 삭제하기 전에 확인 메시지가 표시됩니다. 내가 말했던 것처럼, 내 애니메이션은 사용자가 확인하기 전에 테이블에서 삭제되는 행을 숨 깁니다. 요소는 여전히 있지만 숨겨진 – user2490936

다음 사용자가 클릭하여 삭제를 확인하면 애니메이션이 실행됩니다. – iamthereplicant

좋아, 여기 내 JSP 코드입니다!

UPDATE :

데모 http://jsfiddle.net/g3WLM/1/

출처

2014-03-07 08:54:23 user2490936

해결책을 찾았습니다. 애니메이션이 끝나는 것을 감지하고 행을 제거해야합니다 : '$ row.addClass ('animated flipOutX'). 하나 ('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) { $ (this)) .remove(); });' – user2490936

아이템을 제거 할 때 animate.css로 애니메이션 재생

답변

관련 문제