Dojo размер и удаление элемента на анимации полного

Question

С DIV, как это:

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

И следующий додзё/код JavaScript:

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

Я пытаюсь сделать следующее:

1. Анимировать изменение высоты div до 0
2. Удалить элеменов t от DOM впоследствии

Но в настоящее время текст не исчезает, анимация анимации только на полпути, а div не удаляется после завершения анимации. Каков правильный код javascript для выполнения моих целей?

Answer 1

SebaGR, спасибо, что поставили меня в правильном направлении. Отступ/край действительно имел что сказать, останавливая анимацию полупустыней. У меня все еще были проблемы с текстом внутри элемента и удаление onEnd, но в итоге я нашел ответ сам. Я также добавил wrapper-div с .information_messages, чтобы разрешить несколько элементов .information_message. Окончательный результат следующим образом:

Javascript:

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, и это было из-за полей/paddings. Добавить анимацию заполнения и полей до 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(); 
    } 

Я считаю, что может помочь анимации не завершить.

Об удалении элемента, снятый в темноте:

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

Обратите внимание, что в вашем коде вы звоните сиротой() на DOM объекта вместо набора DOJO. Может быть, это решает.