使用左右动态滑动显示和隐藏div

<div class="container">
  <div class="left-div">左侧内容</div>
  <div class="right-div">右侧内容</div>
</div>

.container {
  position: relative;
  overflow: hidden;
}

.left-div, .right-div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.left-div {
  transform: translateX(-100%);
}

.right-div {
  transform: translateX(100%);
}

var container = document.querySelector('.container');
var leftDiv = document.querySelector('.left-div');
var rightDiv = document.querySelector('.right-div');

container.addEventListener('mouseover', function() {
  leftDiv.style.transform = 'translateX(0)';
  rightDiv.style.transform = 'translateX(0)';
});

container.addEventListener('mouseout', function() {
  leftDiv.style.transform = 'translateX(-100%)';
  rightDiv.style.transform = 'translateX(100%)';
});