[SOLVED] CSS height transition on removal of style="display:none;"

CSS height transition on removal of style="display:none;"

I have html this is basically like this:

<span>
  <input name="checked_field" type="text" />
  <p class="has-warning danger" style="display:none;">{{ error.first() }}</p>
</span>

The display:none is added by JavaScript at load time. It is removed if the user types an invalid value in checked_field.

Since the framework controls visibility by simply removing style="display:none;", I am wondering: Is it possible to transition the height and visibility by pure CSS rules when display:none is removed via JavaScript? Again, given that I'm not able to add a 2nd class, but am stuck with the JavaScript framework removing a style.

Solution

We can achieve this by overriding the display:none property.

.has-warning, .has-warning[style*='display:none'] {
    transition: all 1s;
    display: block !important;
    height: 0;
    opacity: 0;
}

.has-warning:not([style*='display:none']) {
    height: 50px;
    opacity: 1;
}

Here's a JS Fiddle: https://jsfiddle.net/eywraw8t/165903/

WARNING! CSS will see display:none as different from display: none (space in between) so if it doesn't work at first, check this.