lopu lopu - 6 months ago 17
jQuery Question

should a global animate class with > *, > * > *, etc.. work for giving quick animations to :change states?

I came up with the idea to have a class as follows:

.animate,.animate>*,.animate>*>*,.animate>*>*>*,.animate>*>*>*>*,.animate>*>*>*>*>*,.animate>*>*>*>*>*>*,.animate*>*>*>*>*>*>*>, {
-webkit-transition: color .3s ease, opacity .3s ease, .3s ease;
-moz-transition: color .3s ease, opacity .3s ease, .3s ease;
-ms-transition: color .3s ease, opacity .3s ease, .3s ease;
transition: color .3s ease, opacity .3s ease, .3s ease;


}

so that I can just chuck a class="animate etc.." on any div and anything inside it will get these animations by default. It just doesn't work though, and I remember I had it working at some stage but it just stopped over night. Theoretically it should work yes?

Answer

If you want to select any child elements after the .animate class just use:

.animate * {
    // Those rules apply to any child element of .animate
    -webkit-transition: color .3s ease, opacity .3s ease, .3s ease;
    -moz-transition: color .3s ease, opacity .3s ease, .3s ease;
    -ms-transition: color .3s ease, opacity .3s ease, .3s ease;
    transition: color .3s ease, opacity .3s ease, .3s ease;
}