Javascript 用漂亮的动画删除div

Remove div with beautiful animation

提问by Mathieu Lescaudron

I want to remove divwith a great animation but I don't know how to do this.

我想删除div一个很棒的动画，但我不知道该怎么做。

So I make that fiddlefor example :

所以我制作了那个小提琴，例如：

HTML

HTML

<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>

<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>

CSS

CSS

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;
}

JS

JS

$('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);
});

I see a good example here

我在这里看到一个很好的例子

But when a div is removed, she's cut and they are only animation for the next div.

但是当一个 div 被删除时，她被剪切了，它们只是下一个 div 的动画。

Any idea ?

任何的想法 ？

EDIT

编辑

Finally resolved : Jsfiddle

终于解决了：Jsfiddle

回答by Julien Grégtheitroade

Since you remove your element, it cannot be animatedanymore. You could animate via a class and on transitionendremove the element. Like this for example:

既然你删除了你的element，它就不能再存在animated了。您可以通过类制作动画并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()
});

http://jsfiddle.net/nawkufh1/

http://jsfiddle.net/nawkufh1/

回答by Patrick2607

You could do it like this:

你可以这样做：

$('#delete').click(function (e) {
  $(".notification:first-child").slideUp(function() {
    $(this).remove();
  });
});

$('#add').click(function (e) {
  $(".notifications").append("<div class='notification'></div>");
});

.notifications {
    left: 0px;
    top: 0px;
    width: 400px;
    height: 300px;
    position: relative;
    border: solid 1px green;
}

.notification {
    height: 40px;
    background: lightblue;
    margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
  <div class="notification"></div>
  <div class="notification"></div>
  <div class="notification"></div>
  <div class="notification"></div>
</div>

This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.

这使用 jQuery 而不是 CSS 来制作动画。单击删除按钮时，它会将顶部栏向上滑动，然后将其删除。

回答by Mathieu Lescaudron

I've solved my problem with animationJsFiddle

我已经用JsFiddle解决了我的问题animation

Thanks all for your help.

感谢你的帮助。