Results 1 to 4 of 4

Thread: animating removal of list item

  1. #1
    Join Date
    Jun 2008
    Posts
    187
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default animating removal of list item

    Hello,

    I have an unordered list that looks like this:

    Click image for larger version. 

Name:	category list.png 
Views:	74 
Size:	7.3 KB 
ID:	6216

    The html looks like this:

    Code:
    <ul class="categoryList">
        <li _ngconntent-c5 style="background-color: rgb(185, 74, 156);">ROUND</li>
        <li _ngconntent-c5 style="background-color: rgb(143, 143, 198);">MEC</li>
    ...
    </ul>
    The CSS looks like this:

    Code:
        li
        {
            display: inline;
            color: white;
            font-size: 12pt;
            padding: 5px;
            margin-right: 5px;
            border-radius: 10px;
            height: 30px;
            opacity: 1.0;
        }
    
        .categoryList
        {
            margin-top: 10px;
            padding-left: 0;
        }
    I have a click event on each list item that causes the item to be removed from the list and placed elsewhere on the page. For example, if you click "MEC" then list will look like this:

    Click image for larger version. 

Name:	category list sans mec.png 
Views:	77 
Size:	8.2 KB 
ID:	6217

    What I'm wondering is how would one do a CSS animation? So instead of the list all of a sudden not having "MEC" anymore, "MEC" would disappear and all the items to the right will move to the left, filling the gap left behind by "MEC".

    I'm not sure how such a transition would be done on a list. Does anyone have any suggestions?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    You could try a css transition on the width of the ul. If you provide a link to the page, I'll play around with that and see if anything looks promising. Something like:


    Code:
        .categoryList
        {
            margin-top: 10px;
            padding-left: 0;
            transition: width 2s;
        }
    Might also need display: inline-block and/or perhaps other thing(s) to make it work.
    Last edited by jscheuer1; 10-31-2017 at 07:19 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    187
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    You could try a css transition on the width of the ul. If you provide a link to the page, I'll play around with that and see if anything looks promising. Something like:


    Code:
        .categoryList
        {
            margin-top: 10px;
            padding-left: 0;
            transition: width 2s;
        }
    Might also need display: inline-block and/or perhaps other thing(s) to make it work.
    Thanks jscheuer1, but unfortunately it's not working for me. Width transitions don't seem to work on lists or list items.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Well, as I said, "Might also need display: inline-block and/or perhaps other thing(s) to make it work."

    That's why I asked for a link to your page. With that I can try out various scenarios, and perhaps find one that works, and/or determine if there's javascript code that can assist/perform the desired effect.

    If you want more help, please post a link to the page on your site that demonstrates this issue.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. dialog pop up from list item possible?
    By karin_a in forum JavaScript
    Replies: 1
    Last Post: 01-25-2012, 03:05 PM
  2. Resolved Removal of menu item
    By octopusgrabbus in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-05-2011, 06:05 PM
  3. Resolved Php select by list item
    By john0611 in forum PHP
    Replies: 2
    Last Post: 07-22-2009, 03:20 PM
  4. Replies: 1
    Last Post: 05-01-2009, 02:19 AM
  5. List item troubles
    By aosipov in forum CSS
    Replies: 0
    Last Post: 04-27-2006, 03:46 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •