Different transitions with checkbox

[Paul_H]

What i’m trying to do is something similar to this (http://tympanus.net/Development/SelectInspiration/index2.html). As you can see, when you click in “Choose a Bouquet”, the first option appear first, then the second, then the third, etc; and when you click again the last option dissapear first, then the fourth, then the third, etc.

In my code i can’t make this last thing work. When you click for the second time, the first option dissapear first, then second…in other words, in the same order they appear first.

Any idea of how can i make my code more likely to the example in the link? Thanks a lot.

My code here

[RyanReese]

Isn’t this a Javascript question?

[Paul_H]

Is there a way to do it in css? If not, i’m gonna try it with javascript, but i wanted to know first if you could do it in css.

[RyanReese]

I mean, yeah I guess. You’d have to just set somewhat of a bigger transitional delay between the items appearing. Get an attempt worked up and we’ll go from there.

[Paul_H]

Uhhmmm…set a bigger delay between the items appearing? I don’t know if i’m undertanding you well, but i can’t see how that would change the order of the items dissapearing. That, i think, only will slow the transition, but will not affect the order of the items. (Thanks for the patience).

[PaulOB]

Like this:

#activate-menu:checked ~ .menu ul li.option:first-child {transition-delay: .0s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(2) {transition-delay: .05s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(3) {transition-delay: .1s;}
#activate-menu:checked ~ .menu ul li.option:nth-child(4) {transition-delay: .15s;}
#activate-menu:checked ~ .menu ul li.option:last-child {transition-delay: .2s;}

li.option:first-child {transition-delay: .2s;}
li.option:nth-child(2) {transition-delay: .15s;}
li.option:nth-child(3) {transition-delay: .1s;}
li.option:nth-child(4) {transition-delay: .05s;}
li.option:last-child {transition-delay: .0s;}

[Paul_H]

That doesn’t work neither Now the items don’t appear.

[ronpat]

This action shot is from your codepen. What is not working?

[Paul_H]

Yes, that’s work. In that shot the options are appearing. What i’m want to change is the order of the dissapearing options (when you click the boton for the second time), so it would inverse from the appearing option (this is it, the last option dissapear first, the fourth dissapear second, etc…). In the link on my first post, you can see the difference.

[ronpat]

@Paul_H

Any idea of how can i make my code more likely to the example in the link? Thanks a lot.

The demo uses JavaScript.

An HTML list is read from first to last, so the first item in the the list will be the First-In & First-Out as your CodePen shows. I’m not aware of a way to change that behavior without JavaScript.

[PaulOB]

@Paul_H

That doesn’t work neither Now the items don’t appear.

I beg your pardon?

It works perfectly for me.

Or did you mean something else?

[Paul_H]

No, i’m sorry, that’s exactly what i wanted. Surely i make some mistake copying the cody, i’m going to check it right now. Thanks a lot!