CSS height transition on removal of style="display:none;" - vue.js

Question

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.

Answer 1

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.

Answer 2

it really easy
const dropDownSubInput = ref(false) //nuxt 3
.subForm {
width: inherit;
max-height: 0;
opacity: 0;
overflow-y: hidden;
transition: all .2s ease;
}
.formActive {
.form {
box-shadow: 0 41px 36px rgba(0, 0, 0, 0.2);
.subForm {
max-height: 1000px !important;
opacity: 1 !important;
}
}
}
<div class="formSection" :class="dropDownSubInput ? 'formActive' : ''">
<div class="form">
<form #submit.prevent>
<input type="text"
placeholder="Введите слово или название"
v-model="searchInput"
#click="dropDownSubInput = true"
/>
<font-awesome-icon :icon="['fas', 'fa-magnifying-glass']"/>
</form>
<div class="subForm">
</div>
</div>
</div>