CSS different transition delay for each child element, but reverse the delays when the transition reverses...

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

0

I want to animate a drop-down. When the drop-down is expanding, each list element should be delayed slightly more than the previous one. When it is contracting, these delays should happen in the reverse order.

I.e:

Delays on child elements when expanding:

1. 0ms


2. 50ms


3. 100ms

Delays on child elements when contracting:

1. 100ms


2. 50ms


3. 0ms

I can program the expanding logic with a simple nth-child statement:

ul li:nth-child(2) {

    transition-delay: 50ms;

}

ul li:nth-child(3) {

    transition-delay: 100ms;

}

But I'm not sure how to do the contracting animation.

What is the best way to approach this?

css animation delay transition

share|improve this question

asked Jan 3 at 12:42

hazhaz

370423

closed as off-topic by Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison Jan 3 at 14:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

• "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison

If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  show full code .
  
  – Temani Afif
  Jan 3 at 13:06
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
  
  – Paulie_D
  Jan 3 at 13:07
  

  
  
  
  

add a comment | 

0

I want to animate a drop-down. When the drop-down is expanding, each list element should be delayed slightly more than the previous one. When it is contracting, these delays should happen in the reverse order.

I.e:

Delays on child elements when expanding:

1. 0ms


2. 50ms


3. 100ms

Delays on child elements when contracting:

1. 100ms


2. 50ms


3. 0ms

I can program the expanding logic with a simple nth-child statement:

ul li:nth-child(2) {

    transition-delay: 50ms;

}

ul li:nth-child(3) {

    transition-delay: 100ms;

}

But I'm not sure how to do the contracting animation.

What is the best way to approach this?

css animation delay transition

share|improve this question

asked Jan 3 at 12:42

hazhaz

370423

closed as off-topic by Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison Jan 3 at 14:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

• "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison

If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  show full code .
  
  – Temani Afif
  Jan 3 at 13:06
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
  
  – Paulie_D
  Jan 3 at 13:07
  

  
  
  
  

add a comment | 

0

0

0

I want to animate a drop-down. When the drop-down is expanding, each list element should be delayed slightly more than the previous one. When it is contracting, these delays should happen in the reverse order.

I.e:

Delays on child elements when expanding:

1. 0ms


2. 50ms


3. 100ms

Delays on child elements when contracting:

1. 100ms


2. 50ms


3. 0ms

I can program the expanding logic with a simple nth-child statement:

ul li:nth-child(2) {

    transition-delay: 50ms;

}

ul li:nth-child(3) {

    transition-delay: 100ms;

}

But I'm not sure how to do the contracting animation.

What is the best way to approach this?

css animation delay transition

share|improve this question

asked Jan 3 at 12:42

hazhaz

370423

I want to animate a drop-down. When the drop-down is expanding, each list element should be delayed slightly more than the previous one. When it is contracting, these delays should happen in the reverse order.

I.e:

Delays on child elements when expanding:

1. 0ms


2. 50ms


3. 100ms

Delays on child elements when contracting:

1. 100ms


2. 50ms


3. 0ms

I can program the expanding logic with a simple nth-child statement:

ul li:nth-child(2) {

    transition-delay: 50ms;

}

ul li:nth-child(3) {

    transition-delay: 100ms;

}

But I'm not sure how to do the contracting animation.

What is the best way to approach this?

css animation delay transition

css animation delay transition

share|improve this question

asked Jan 3 at 12:42

hazhaz

370423

share|improve this question

asked Jan 3 at 12:42

hazhaz

370423

share|improve this question

share|improve this question

asked Jan 3 at 12:42

hazhaz

370423

asked Jan 3 at 12:42

hazhaz

370423

asked Jan 3 at 12:42

hazhaz

370423

370423

closed as off-topic by Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison Jan 3 at 14:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

• "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison

If this question can be reworded to fit the rules in the help center, please edit the question.

closed as off-topic by Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison Jan 3 at 14:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

• "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Paulie_D, LGSon, grizzthedj, Bob Dalgleish, Mickael Maison

If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  show full code .
  
  – Temani Afif
  Jan 3 at 13:06
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
  
  – Paulie_D
  Jan 3 at 13:07
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  show full code .
  
  – Temani Afif
  Jan 3 at 13:06
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
  
  – Paulie_D
  Jan 3 at 13:07
  

  
  
  
  

show full code .

– Temani Afif
Jan 3 at 13:06

show full code .

– Temani Afif
Jan 3 at 13:06

1

1

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

– Paulie_D
Jan 3 at 13:07

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example

– Paulie_D
Jan 3 at 13:07

add a comment | 

1 Answer
1

active

oldest

votes

2

You can add a class when it's expanded or collapsed and play the animation the other way depending on that class:

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

share|improve this answer

edited Jan 3 at 13:21

answered Jan 3 at 13:09

ArmelArmel

1,2081022

add a comment | 

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

2

You can add a class when it's expanded or collapsed and play the animation the other way depending on that class:

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

share|improve this answer

edited Jan 3 at 13:21

answered Jan 3 at 13:09

ArmelArmel

1,2081022

add a comment | 

2

You can add a class when it's expanded or collapsed and play the animation the other way depending on that class:

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

share|improve this answer

edited Jan 3 at 13:21

answered Jan 3 at 13:09

ArmelArmel

1,2081022

add a comment | 

2

2

2

You can add a class when it's expanded or collapsed and play the animation the other way depending on that class:

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

share|improve this answer

edited Jan 3 at 13:21

answered Jan 3 at 13:09

ArmelArmel

1,2081022

You can add a class when it's expanded or collapsed and play the animation the other way depending on that class:

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

var btn = document.querySelector('button');

var menu = document.querySelector('ul');



btn.addEventListener('click', function() {

  menu.classList.toggle('hidden');

});

ul.hidden li {

  opacity: 0;

}

ul li {

  opacity: 1;

}



/* Expand */

ul li:nth-child(1) {

  transition-delay: 200ms;

}

ul li:nth-child(2) {

  transition-delay: 400ms;

}

ul li:nth-child(3) {

  transition-delay: 600ms;

}



/* Collapse */

ul.hidden li:nth-child(1) {

  transition-delay: 600ms;

}

ul.hidden li:nth-child(2) {

  transition-delay: 400ms;

}

ul.hidden li:nth-child(3) {

  transition-delay: 200ms;

}

<button type="button">Click</button>

<ul class="hidden">

  <li>Item</li>

  <li>Item</li>

  <li>Item</li>

</ul>

share|improve this answer

edited Jan 3 at 13:21

answered Jan 3 at 13:09

ArmelArmel

1,2081022

share|improve this answer

share|improve this answer

edited Jan 3 at 13:21

edited Jan 3 at 13:21

edited Jan 3 at 13:21

answered Jan 3 at 13:09

ArmelArmel

1,2081022

answered Jan 3 at 13:09

ArmelArmel

1,2081022

answered Jan 3 at 13:09

ArmelArmel

1,2081022

1,2081022

add a comment | 

add a comment | 

This page is only for reference, If you need detailed information, please check here