如何在路由之间制作滑出动画

<div id="container"></div>

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

// 监听路由切换事件
window.addEventListener('hashchange', function() {
  var container = document.getElementById('container');
  
  // 添加滑入动画类
  container.classList.add('slide-in');
  
  // 延迟一段时间后，移除滑入动画类并添加滑出动画类
  setTimeout(function() {
    container.classList.remove('slide-in');
    container.classList.add('slide-out');
  }, 500);
  
  // 延迟一段时间后，移除滑出动画类
  setTimeout(function() {
    container.classList.remove('slide-out');
  }, 1000);
});

.slide-in {
  animation: slideIn 0.5s forwards;
}

.slide-out {
  animation: slideOut 0.5s forwards;
}