Question 266851 in CSS Question posted in
Some basic documentation can be found here.

Css – What causes this delay in a grid-template-rows transition?

Ever since i found out that there’s the option to animate height: auto; by using grid-template-rows, i have been using it wherever i see fit, like a menu or FAQ items.

Recently i noticed that the inner element does not slide as fast as the outer element does.

See this fiddle: https://codepen.io/stenpelzer/pen/bGOPrLX.

Why does this happen?

Edit: I found a solution, but it does not answer the why. Please let me know if you have more information.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution to fix the issue, though it doesn't feel very solid.

    Adding overflow: hidden; to .outer and setting height: 100000% on .inner will make the inner element always be the height of the outer.

    https://codepen.io/stenpelzer/pen/ExGBbKB


  2. 0

    Add inside .outer transition-timing-function: linear; The default is ease. This value sets the animation to a slow start then after a time period the speed increases and before it ends the speed again becomes slow.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search