使用css3动画实现左右滑动展示

可以使用 CSS3 动画来实现左右滑动展示。具体步骤如下：

1. 创建 HTML 结构

首先，创建 HTML 结构，包括一个容器和两个子元素，例如：

<div class="container">
  <div class="sidebar"></div>
  <div class="main-content"></div>
</div>

其中，.container 为容器，.sidebar 和 .main-content 为子元素，可以使用任意其他的类名。

2. 设置样式

给 .container 设置 position: relative，给 .sidebar 和 .main-content 设置 position: absolute 和 top: 0，使其覆盖在 .container 上。

.container {
  position: relative;
}

.sidebar,
.main-content {
  position: absolute;
  top: 0;
}

同时，给 .sidebar 和 .main-content 设置宽度和高度，以及需要展示的内容。

3. 添加动画

使用 CSS3 的 transition 和 transform 属性来实现动画。

先给 .container 添加 overflow: hidden，防止子元素超出容器。

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

然后，给 .sidebar 和 .main-content 添加 transform: translateX(-100%)，让它们显示在容器外部左侧。

.sidebar {
  width: 200px;
  height: 100%;
  transform: translateX(-100%);
}

.main-content {
  width: calc(100% - 200px);
  height: 100%;
  left: 200px;
  transform: translateX(-100%);
}

接下来，使用 JavaScript 将 .sidebar 和 .main-content 设置为可见，并且添加一个类名来触发动画。

.sidebar.show,
.main-content.show {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}

最后，使用 JavaScript 控制类名的切换，触发动画。

var sidebar = document.querySelector('.sidebar');
var mainContent = document.querySelector('.main-content');

function toggleSidebar() {
  sidebar.classList.toggle('show');
  mainContent.classList.toggle('show');
}

这样就可以实现左右滑动展示了。