Question

전체 애니메이션에 요소를 삭제 :

<div id="im1" class="information_message error">Error message here 
<a href="javascript:hide('im1')">Hide</a></div> 

그리고 도장 다음/자바 스크립트 코드 :

function hide(id){ 
    id.innerHTML = ''; 
    dojo.animateProperty({ 
     node: id, 
     duration: 500, 
     properties: { 
      height: {end: 0} 
     }, 
     onEnd: function(){ 
      id.orphan(); 
     } 
     }).play(); 
    } 

나는 다음을 수행하려고 해요 :

1. div의 높이의 크기를 0으로 애니메이션화
2. elemen 삭제 t 이후 DOM에서

그러나 현재 텍스트가 사라지지 않으며, 애니메이션이 절반 만 움직이게되고 애니메이션 완료시 div가 삭제되지 않습니다. 내 목표를 달성하기위한 올바른 자바 스크립트 코드는 무엇입니까?

Answer 1

SebaGR, 올바른 방향으로 나를 보내 주셔서 감사합니다. 패딩/마진에는 실제로 애니메이션을 반쯤 멈추는 말이있었습니다. 나는 여전히 요소 내부의 텍스트에 문제가 있었고, 결국에는 삭제되었지만 결국에는 대답을 찾았다. 또한 .information_messages과 함께 wrapper-div를 추가하여 여러 개의 .information_message 요소를 허용합니다. 최종 결과는 다음과 같습니다

자바 스크립트 :

function hide(id){ 
    dojo.byId(id).style.overflow = 'hidden'; 
    dojo.animateProperty({ 
     node: id, 
     duration: 500, 
     properties: { 
      height: {start: dojo.contentBox(id).h, end: 0}, 
      margin: {end: 0}, 
      marginBottom: {end: 0}, 
      padding: {start: 10, end: 0}, 
      paddingLeft: {end: 10 }, 
      paddingRight: {end: 10 }, 
      borderWidth: {start: 1, end: 0} 
     }, 
     onEnd: function(){ 
      dojo.query('#' + id).orphan(); 
      // when all information_message elements are deleted, delete 
      // the information_messages container as well. Animate 
      // padding change to prevent sudden 'jump' on deletion. 
      if(dojo.query('.information_message').length == 0){ 
       dojo.animateProperty({ 
        node: dojo.query('#information_messages')[0], 
        duration: 500, 
        properties: { 
         padding: {start: 5, end: 0} 
        }, 
        onEnd: function(){ 
         dojo.query('#information_messages').orphan(); 
        } 
       }).play(); 
      } 
     } 
    }).play(); 
} 

HTML :

<div id="information_messages"> 
    <div class="information_message success" id="im1"> 
     <a href="javascript:hide('im1');" class="right">Hide</a> 
     Success message 1 
    </div> 
    <div class="information_message error" id="im2"> 
     <a href="javascript:hide('im2');" class="right">Hide</a> 
     Error message 1 
    </div> 
</div> 

CSS :

#information_messages { 
    padding: 5px; 
} 

.information_message { 
    margin-bottom:3px; 
} 

.error { 
    border: 1px solid #b2110a; 
    background-color: #f3dddc; 
    padding: 10px; 
} 

.success { 
    border: 1px solid #177415; 
    background-color: #d6f6d5; 
    padding: 10px; 
} 

Answer 2

DOJO 대신 jQuery를 사용하므로 제거되지 않는 이유는 확실하지 않습니다.

하지만 jQuery에서 절반 정도 완성 된 애니메이션에 문제가 발생했습니다. 여백/패딩 때문이었습니다. 다음과 같이 0으로 패딩과 마진에 애니메이션을 추가

function hide(id){ 
    id.innerHTML = ''; 
    dojo.animateProperty({ 
     node: id, 
     duration: 500, 
     properties: { 
       height: {end: 0}, 
       margin: {end: 0}, 
       padding: {end: 0} 
     }, 
     onEnd: function(){ 
       id.orphan(); 
     } 
     }).play(); 
    } 

나는 그 애니메이션이 완료되지에 도움이 될 수 믿습니다. 어둠 속에서 촬영 한 요소 제거에 대한

: 코드에서 당신이 DOM 객체 대신 도장 세트에 고아()를 호출하고 있다는

 onEnd: function(){ 
       dojo.query("#"+id.id).orphan(); 
     } 

참고. 어쩌면 그것으로 해결할 수 있습니다.