HOWTO · CSS
使用 CSS 实现元素从左侧滑入
了解如何使用 CSS 的 transform 和 transition 创建从左侧滑入的效果、在页面加载时触发它，并调整其时序或方向。
本页内容
从左侧滑入的效果，是让元素从最终位置左侧移动到视野中。使用 CSS 在两个状态之间改变 transform 和 opacity，即可实现这种效果。本例使用 transition；如果效果需要多个步骤或重复播放，也可以使用带关键帧的 CSS animation。
从左侧滑入的效果原理
transition 会在属性值发生变化时为其添加过渡效果。元素最初向左偏移且透明，随后移动到正常位置并变为可见。translateX() 控制水平方向的移动，而过渡时长和缓动方式决定变化的节奏。transform 会改变元素的视觉位置，但不会改变它在文档流中的位置。
设置 HTML 结构
页面需要一个带有 CSS 可选中类名的元素。在下面的完整示例中，元素起初只有 slide-in 类；页面加载后，JavaScript 再添加 is-visible，这样浏览器就能从初始状态开始执行过渡。如果一开始就在 HTML 中同时设置这两个类，元素会在首次渲染时直接显示，而不会从隐藏状态滑入。要看到滑入过渡效果，就像示例中那样，在初始状态完成渲染后再添加可见状态类。
使用 CSS 创建从左侧滑入的效果
使用 transform: translateX(-100vw) 和 opacity: 0 设置初始状态。偏移一个视口宽度会将元素移到左侧，opacity 则让它在此位置保持透明。可见状态使用 transform: translateX(0) 和 opacity: 1。为这些属性设置 transition，即可让它们在半秒内沿缓动曲线完成变化。
页面还会隐藏水平方向的溢出内容，避免元素在屏幕外的初始位置造成水平滚动条。如果希望元素移动的距离更短，可以调整偏移量。
触发和自定义效果
将这段 JavaScript 复制到 generate-page.js 之类的文件中，并使用 Node.js 运行；脚本会输出完整的 HTML 页面源码。将输出保存为 slide-in.html，再用浏览器打开即可查看效果。本例在页面加载时触发；在实际网站中，也可以在按钮点击或其他事件发生时添加可见状态类。示例中显示的标签文字保持英文。
const html = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slide in from the left</title>
<style>
body { overflow-x: hidden; font: 1rem sans-serif; }
.slide-in {
display: inline-block;
padding: 1rem 1.5rem;
background: #e7f1ff;
transform: translateX(-100vw);
opacity: 0;
transition: transform 500ms ease, opacity 500ms ease;
}
.slide-in.is-visible {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="slide-in">Hello, I slide in from the left!</div>
<script>
window.addEventListener("load", () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector(".slide-in").classList.add("is-visible");
});
});
});
</script>
</body>
</html>`;
console.log(html);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slide in from the left</title>
<style>
body { overflow-x: hidden; font: 1rem sans-serif; }
.slide-in {
display: inline-block;
padding: 1rem 1.5rem;
background: #e7f1ff;
transform: translateX(-100vw);
opacity: 0;
transition: transform 500ms ease, opacity 500ms ease;
}
.slide-in.is-visible {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="slide-in">Hello, I slide in from the left!</div>
<script>
window.addEventListener("load", () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector(".slide-in").classList.add("is-visible");
});
});
});
</script>
</body>
</html>
要调整速度，请修改 500ms；过渡时长和缓动方式可以分别设置。若要让元素从上方移入，可在初始状态使用带负垂直偏移量的 translateY()，并在可见状态使用 translateY(0)。如果页面渲染时可见状态类已经存在，就不需要 JavaScript；如果希望效果在某个事件发生后或状态稍后改变时才开始，则可以使用 JavaScript。示例页面中显示的文字标签仍为英文，因为示例代码块按原样保留。
常见问题
这个效果在移动设备上可用吗？
本例使用 CSS transform 和 transition。请按照常规兼容性检查流程，确认网站所支持的浏览器和设备。
如何调整过渡时长？
修改 transition 声明中的 500ms 时长即可。如果希望 transform 和 opacity 在不同时间结束，也可以分别为它们设置不同的时长。
元素可以从其他方向滑入吗？
可以。使用 translateY() 可以让元素垂直移动；也可以调整 translateX() 的正负方向和偏移量，让元素从水平方向的另一侧进入。
是否必须使用 JavaScript？
不必。CSS 负责处理两个状态之间的过渡。JavaScript 只是按时切换类名的一种方式；也可以在 HTML 中预先设置类名，或使用其他由 CSS 驱动的状态变化。