146 replies

Can't transition padding

The base problem I'm trying to solve is I have an element that I want to be able to click on, and then a second element appears to side down from behind, all simple divs with text inside each. Best I can tell, the best way to do this to make things a grid and transition on the

grid-template-rows

grid-template-rows

. That part of the transition worked fine, but because I was using a negative top value + a padding top of the same value, padding would just appear, then the height transition. So I tried to transition on

padding-top

padding-top

as well, but it didn't work.

I created a JSFiddle showing my code: https://jsfiddle.net/ftgu7zc1/1/

Any suggestions on how to fix this bliping? Should I be using something other than negative top/positive padding top to make it look like it's coming down from behind?

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.