.container
  h1 Visibility property experiment
  button(type='button') toggle
  a(href="").item.target
  a(href="").item
  a(href="").item

@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1 {
  font-family: 'Merriweather', serif;
  margin-top: 80px;
  margin-bottom: 0;
}
button {
  margin: 40px 0;
  outline: none;
  border: 1px solid #333;
  background: transparent;
  padding: .75rem 2rem;
  cursor: pointer;
}
.item {
  width: 80%;
  height: 200px;
  background: #333;
  margin-bottom: 3rem;
  border-radius: .25rem;
}
//from here!
.target {
  background: #ff0000;
  visibility: hidden;
  opacity: 0;
  transition-property: opacity visibility;
  transition-duration: 1s;
  &.is-visible {
    visibility: visible;
    opacity: 1;
  }
}

const btn = document.querySelector('button');
const target = document.querySelector('.target');
btn.addEventListener('click',()=>{
  target.classList.toggle('is-visible');
});