Transition on show/hide scrollable Div

Question

Having a div with dynamic content of scrollable logs, how can I make a transition when it shows/hide
I need its height gradually increase/decrease.

<div className={logsClass}>
    <div className={isOpened ? 'show' : 'hide'}>
       <p dangerouslySetInnerHTML={{__html: formatNote(props.logs)}}/>
       <div ref={dummy} className='a' />
    </div>
</div>

Here is my CSS:

.show{
   opacity: 1;
   visibility: visible;
}

.hide{
    visibility : hidden; 
    opacity: 0 
}

.rc_logsContent {
    overflow-y: auto;
    background-color: #2b2b2b;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    transition: height 500ms;
}