Box-shadows only render once the animation completes

To reproduce:

• Go to demo page.
• Using developer tools, go to the .demo-content element and add this box shadow style:

box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14), 0 4px 20px 3px rgba(0, 0, 0, 0.12);

Observe the box-shadow appearance at the end of the animation:

[Stanko]

CSS classes are added here. Docs are updated with a new prop.

I hope this is what you were going for (rather large gif):

Please note that box shadow transition should be passed through style object not to be overridden in the react component.

CSS

.demo-1.rah-static--height-specific,
.demo-1.rah-static--height-auto,
.demo-1.rah-animating--to-height-specific,
.demo-1.rah-animating--to-height-auto {
  box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
}

JS

<AnimateHeight
  duration={ 1000 }
  height={ height }
  className='demo demo-1'
  style={ { transition: 'box-shadow 1000ms' } }
>

When you check it yourself, please close the issue.

Cheers!

~P.S. I will publish it to NPM in a few minutes.~ Done.

[Stanko]

I guess hooray emoji means this is fixed 😃 closing it!