道場はこのようなdiv要素でアニメーションに完全

Question

を要素のサイズを変更して、削除します。私は次のことをやろうとしている

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

：

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

そして、次の道場/ JavaScriptコード

1. divの高さのサイズを0にアニメートする
2. elemenを削除する後でDOMからt

現在のところ、テキストは消えず、アニメーションは途中でアニメーションされ、アニメーションが完了するとdivは削除されません。私の目標を達成するための正しいJavaScriptコードは何ですか？

Answer 1

SebaGR、正しい方向に私を入れてくれてありがとう。パディング/マージンは実際にアニメーションを途中で止めると言っていました。私はまだ要素内のテキストに問題があり、最後は削除されましたが、最終的には自分自身で答えが見つかりました。また、複数の.information_message要素を使用できるように、.information_messagesのwrapper-divを追加しました。最終的な結果は次のとおりです。

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の途中で完了しました。これは、マージン/パディングのためです。アニメーションを埋め込みに追加し、余白を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(); 
     } 

注（）の代わりにDOJOセットのDOMオブジェクト上：要素の削除、暗闇の中でショットについて

。多分それはそれを解決するでしょう。