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.

http://codepen.io/anon/pen/ogVqLW

[Senff]

From what I can see on that Tympanus example, once you click on it to show the options, the wrapper gets an added class.

The listitems have a transition delay. The first one has 0.05, the second 0.1, the third 0.15, etc. etc.

But when they’re wrapped in that added class, it’s the other way around: first one has 0.25, second one 0.2, third 0.15, etc.

So I guess the easiest way is just add a class to the outer wrapper once the item are visible.

[Author]

Posts