I'm using the toggleClass function to add the class .expend to a div with an ID of #menu, which increases the height of the menu from 100px to 200px with a smooth transition effect. I also have a pseudo-element #menu:after for aesthetic purposes.
My issue is that when the .expend class is toggled and the :after element appears, there is no fading in or out animation present.
I am seeking a solution to smoothly animate the appearance and disappearance of my pseudo-element similarly to how the menu transitions. How can I achieve this?
$('#link').click( function() {
$("#menu").toggleClass("expend");
$('.input-area').fadeToggle(300);
} );#menu {
width: 200px;
height: 100px;
border: 1px solid blue;
padding: 10px;
margin: 10px;
transition: 0.3s ease-out;
}
#menu.expend {
height: 200px !important;
}
#menu.expend:after {
content: 'how to get a 0.3 transition effect here (fade in and fade out) ?';
position: absolute;
top: 170px;
left: 30px;
width: 170px;
height: 60px;
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link" href="#">click me</a>
<div id="menu">
<div class="input-area">
<input type="text" name="test" id="test" value=""/>
</div>
</div>