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有问题，但最终自己找到了答案。我还添加了一个 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;
}
于 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();
        }

请注意，在您的代码中，您在 DOM 对象而不是 DOJO 集上调用 orphan()。也许这可以解决它。

于 2009-03-16T03:01:06.300 回答