Transistion div on height change without jquery - html

Question

I have a basic setup. When I increase the height, I get a smooth increase. When decreased, I should get a smooth decrease but instead a sharp decrease.
<div className="foo <!-- -->">Hey</div>
You may have noticed className and <!-- -->, I'm using react. <!-- --> gets replaced with the class to decrease the height.
// SCSS
.foo {
height 400px;
// background props
transition: all 250ms ease-out
}
.foo.decreaseClass {
height: 40px;
transition: all 250ms ease-in
}
When the new class is attached, the div becomes
<div className="foo decreaseClass">Hey</div>
How to get both transitions down/up?

Answer 1

It's because you're not properly closing the height declaration in .foo. You're using a comma instead of a semi-colon, rendering both height and transition declarations invalid. Also note the same declaration should contain a colon between the style property name and its value (height: 400px;).
Therefore, your element only has defined height and transition only when having both classes.
See it working:
document.querySelector('.foo').addEventListener('click', function(event) {
event.target.classList.toggle('decreaseClass')
})
.foo {
height: 200px;
transition: all 250ms ease-out;
border: 1px solid
}
.foo.decreaseClass {
height: 40px;
transition-timing-function: ease-in
}
<div class="foo">Hey</div>

Answer 2

Use CSS #keyframe animation and alternate properties. infinite is added just for demo purposes. Instead of height I added transform:scaleY(1) to (10).
Demo
body {
overflow: hidden
}
.test {
width: 200px;
margin: 10px;
background: red;
font-size: 32px;
text-align: center;
color: white
}
.B {
height: 40px;
animation: animB 1s alternate infinite;
transform-origin: top;
}
#keyframes animB {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(10);
}
}
<div class='test B'>TEST</div>