inline or class transition

by kontrach

HTML

<div class="transition"></div>
<div class="inline small"></div>
<button>Increase height</button>

CSS

.transition{
  
  height: 50px;
  background: silver;
  transition: height .5s;
  border: 1px solid green;
}

.transition.small{
  height: 150px;
}

.inline{
  background: gray;
  border: 1px dashed red;
  transition: height .5s;
}

.inline.small{}

JavaScript

var btn = document.querySelector('button');
var transition = document.querySelector('.transition');
var inline = document.querySelector('.inline');

inline.style.height = '50px';


btn.addEventListener('click', () => {
	transition.classList.toggle('small');
  const isSmall = inline.classList.contains('small');
  if (isSmall) {
    inline.style.height = '150px';
    inline.classList.remove('small');
  } else {
    inline.style.height = '50px';
    inline.classList.add('small');
  }
});