2

次のような div を使用します。

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

そして、次の dojo/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. その後、DOMから要素を削除します

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

4

2 に答える 2

3

SebaGR、私を正しい方向に導いてくれてありがとう。パディング/マージンには、アニメーションを途中で停止するという意味がありました。要素内のテキストとonEndの削除にまだ問題がありましたが、最終的には自分で答えを見つけました。.information_messagesまた、複数の.information_message要素を許可するためにラッパー-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;
}
于 2009-03-16T10:10:07.220 に答える
1

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 オブジェクトに対して orphan() を呼び出していることに注意してください。多分それはそれを解決します。

于 2009-03-16T03:01:06.300 に答える