使用addClass更改的缓动CSS渐变

Question

在此jsFiddle中：https://jsfiddle.net/ptba8Lzd/

我已正确完成所有操作，以便使用addClass进行更改的属性可以顺利进行（使用transition: all 2.5s ease-out;）。

您可以使用height属性看到此方法正常工作。但是，当从一种瞬态切换到另一种瞬态时，它会突然发生。为什么？如何在这两者之间顺畅地切换？

linear-gradient(to bottom, #25211e 0%, rgba(37, 33, 30, 0) 100%);

linear-gradient(to bottom, #25211e 0%, rgba(37, 33, 30, 255) 100%);