CSS animate a delete button

CSS animate a delete button.markdown

CSS animate a delete button

Forked from Mr Rogers's Pen CSS animate a delete button.

A Pen by Mr Rogers on CodePen.

License.

index.html

ul
  li
    .content content 1
    .remove
      .bg
      .del Delete
  li
    .content content 2
    .remove
      .bg
      .del Delete      

script.js

jQuery(function(){
  $('.remove').on('click', function(ev) {
     $(this).closest('ul').find('li').removeClass('show-delete-button')
     $(this).closest('li').addClass('show-delete-button')
  });
  
  $('.del').click(function(){
     $(this).closest("li").addClass("is-removing");
  });
  
  $("body").on("animationend webkitAnimationEnd oAnimationEnd", "li", function(e) {
    console.log('anim end target', e.target);
    console.log('anim end ctarget', e.currentTarget);
        $(e.currentTarget).remove();
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@keyframes expandLeft {
  50% {
    width: 100%;
  }

  100% {
    width: 100%;
  }
}

@keyframes collapseUp {
  50% {
    height: 40px;
  }

  100% {
    height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

li {
  position: relative;
  overflow:hidden;
  padding: 40px;
  border: 1px solid blue;
}

.content {
  width: 100px;
  border:1px solid #a99;
}
.remove {
  width: 100px;
  border:1px solid #2cf;
 .bg {
    &:after {
      content: "x";
    }
  }
}
.del {
  opacity:0;
  position: absolute;  
  width: 100px;
  transition: all 0s ease-in;
  right: -100px;
  overflow:hidden;
  line-height: 40px;
}

.is-removing {
  animation-name: collapseUp;
  animation-duration: 4s;
  .del {
    animation-name: expandLeft;
    animation-duration: 4s;
  }
}

.show-delete-button {
  .del {
    transition: all 1s ease-in;
  
    opacity:1;
    
    right: 0px;
    width: 100px;
    background-color: red;
  }
  
  .bg {
    display: none;
  }
}