Question

32

CSS3 animation on li remove

rated 0 times [ 36] [ 4] / answers: 1 / hits: 5763 / 9 Years ago, fri, april 17, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryantc

Add To Favorites

Follow

Total Points: 455

Total Questions: 96

Total Answers: 110

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

bryantc questions

1 How to fix TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Fri, Aug 13, 21, 00:00, 3 Years ago

1 using react router with next.js

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Notification system using socket.io

Fri, Jun 5, 20, 00:00, 4 Years ago

1 prisma2: how to fetch nested fields?

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 9 Years ago jaleelh · Accepted Answer

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>