CODEWITHSUNDEEP
javascriptjquerycssanimation
hyperdrive
hyperdrive

Reputation: 1846

CSS transition on click

I'm working on creating a mini-sort plugin with jquery.

I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.

I tried with creating a class and applying that class to the element but this won't work.

    $('.legend li').on('click',function(){

        var thisClass = $(this).attr('class');

        $('div').not('.'+thisClass).removeClass('active');
        $('div.'+thisClass).addClass('active');
   });

I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.

Edit

Here is a fiddle. http://jsfiddle.net/NktDU/1/

Upvotes: 0

Views: 391

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 25934

You could use jQuery's hide and show instead

Updated demo

$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');

and remove display:none from the CSS

Or you could do it just using CSS transitions and toggling the width, like so

#grid div {
    display: block;
    height: 20px;
    width: 0px;
    margin:0px;
    float: left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;  
    background: black;
}
#grid .active {
    width:20px;
    margin: 2px;
}

Demo for that

Upvotes: 1

Millhorn
Millhorn

Reputation: 3166

I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.

Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.

I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...

Edit: I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.

Good luck!

Upvotes: 0

Related Questions