1) Opacidade:

#el {
opacity: 0;
pointer-events: none;
cursor: default;
transition: all .15s;
}

#el.active {
opacity: 1;
pointer-events: initial;
cursor: pointer;
}


------

2) Collapse

#el {
position: relative;
max-height:0;
overflow: hidden;
transition:all .3s ease-in;
}

#el.active {
max-height:1000px;
overflow: hidden;
}

------

3) Opacidade e Collapse

#el {
max-height: 0px;
opacity:0;
pointer-events: none;
cursor: default;
}

#el.active {
max-height: 1000px;
opacity:1;
transition:opacity .8s;
pointer-events: initial;
cursor: pointer;
}