如何在两个全宽小工具之间滑动过渡？

<div class="container">
  <div class="tool1">工具1内容</div>
  <div class="tool2">工具2内容</div>
</div>

.container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.tool1, .tool2 {
  width: 100vw;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: transform 0.3s ease-in-out;
}

.tool1 {
  background-color: #f1f1f1;
}

.tool2 {
  background-color: #e1e1e1;
}

const container = document.querySelector('.container');
const tool1 = document.querySelector('.tool1');
const tool2 = document.querySelector('.tool2');

container.addEventListener('scroll', () => {
  if (container.scrollLeft < container.clientWidth / 2) {
    tool1.style.transform = 'translateX(0)';
    tool2.style.transform = 'translateX(100%)';
  } else {
    tool1.style.transform = 'translateX(-100%)';
    tool2.style.transform = 'translateX(0)';
  }
});