CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jack
Jack

Reputation: 7557

CSS3 animation on li remove

I want to add a subtle fade effect as li gets removed from the ul. I added this piece of CSS:

-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

on my li

However, when I remove that li using $(this).remove(); the li gets removed but there is no animation seen.

What am I missing?

EDIT I don't want to use Jquery fadeOut. I want to be able to use CSS3 animations.

Upvotes: 0

Views: 6031

Answers (6)

dizel3d
dizel3d

Reputation: 3669

Oh! You just need some magic of transitionend event.

// start transition animation on click
$(document).on('click', 'li', function() {
  $(this).addClass('removed');
});

// remove li on transition animation end
$(document).on('transitionend', '.removed', function() {
  $(this).remove();
});
li {
  cursor: pointer;
  border: 3px solid red;
  margin: 2px;
  padding: 5px;
}

.removed {
  transition: all 0.5s ease-out;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

Upvotes: 2

Anupam Basak
Anupam Basak

Reputation: 1523

Here is a CSS way of doing it.

FIDDLE: http://jsfiddle.net/moc1jt05/

HTML:

<ul>
    <li>hellow world 1!!</li>
    <li>hellow world 2!!</li>
</ul>

CSS:

li {
    transition: all 0.2s ease;
    opacity: 1;
}
li.hide {
    opacity: 0;
}

JQUERY:

$("li").on("click", function() {
    $(this).addClass("hide");
});

Upvotes: 3

prog1011
prog1011

Reputation: 3495

See the Code Snippet - Below -

You should use fadeOut() for animation effect

$('li').click(function(){
    $(this).fadeOut(1000,function(){
        $(this).remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>

Upvotes: 0

Iftakharul Alam
Iftakharul Alam

Reputation: 3321

You can try this

<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

with JS

$('li').on('click',function(){
    $(this).slideUp('slow');
    //You can also use time delay
    //$(this).slideUp(1000);
});

fiddle link fiddle

Upvotes: 0

Luke
Luke

Reputation: 1724

Try fading out and then removing the element:

$(this).fadeOut(200, function() {
    $( this ).remove();
});

Upvotes: 0

Akshay
Akshay

Reputation: 14368

You can try something like this 

$('li').click(function(){
    $(this).hide(1000,function(){
        $(this).remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

Upvotes: 1

Related Questions