Javascript 删除具有漂亮动画的div

我想用一个很棒的动画删除

div

，但我不知道怎么做

我举个例子：

HTML JS 我看到了一个很好的例子

但是，当一个div被删除时，她被剪切，而这只是下一个div的动画

有什么想法吗

编辑

---

最终解决：

由于您删除了

元素

，因此它不能再设置

动画

。您可以通过类设置动画，并在

transitionend

上删除元素。例如：

.animate
{
    height: 0px;//or anything you need
    transition: height 1s;
}



$('#delete').click(function (e) {
        //instead of remove you add a class.
        $(".notification:first-child").addClass('animate');
    });
$('.notification').on('transitionend', function(e){
    //when transition is finished you remove the element.
    $(e.target).remove()
});

---

您可以这样做：

$（“#删除”）。单击（函数（e）{
$（“.notification:first child”）.slideUp（函数（）{
$（this.remove（）；
});
});
$（'#添加'）。单击（函数（e）{
$（“.notifications”）。追加（“”）；
});
。通知{
左：0px；
顶部：0px；
宽度：400px；
高度：300px；
位置：相对位置；
边框：实心1px绿色；
}
.通知{
高度：40px；
背景：浅蓝色；
保证金：2倍；
}

删除
添加
我已经用
动画解决了我的问题

谢谢大家的帮助。
您可以回答自己的问题。你不必用你的答案来编辑问题。
div.test, div.test2 {
    display:inline-block;
    padding: 20px;
    margin:5px;

    border:1px solid black;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

$('div.test').on('click', function() {
   $(this).remove();
});

$('div.test2').on('click', function() {
    // I don't want to change opacity or padding...
    // I just want to remove with animation like this:
    $(this).css('width','0px').css('padding','0px');
    $(this).css('opacity',0);
});

.animate
{
    height: 0px;//or anything you need
    transition: height 1s;
}



$('#delete').click(function (e) {
        //instead of remove you add a class.
        $(".notification:first-child").addClass('animate');
    });
$('.notification').on('transitionend', function(e){
    //when transition is finished you remove the element.
    $(e.target).remove()
});