DEMO | zp25

下方有色区域将在hidden并切回visible时通过动画效果缓慢显示

#page-visibility {
  height: torem(320px);
  background-color: color(gold);
  transition: opacity 2s;
  opacity: 0;

  &.show {
    opacity: 1;
  }
}

document.addEventListener('visibilitychange', () => {
  const elem = document.querySelector('#page-visibility');

  if (document.hidden) {
    elem.classList.remove('show');
  } else {
    elem.classList.add('show');
  }
}, false);