悠悠楠杉
网站页面
使用CSSTransition实现Div平滑交换动画教程
11/30
![]()
在现代网页设计中，动画效果已经成为提升用户体验的重要手段。一个简单却极具视觉吸引力的效果，就是让两个div元素在点击后平滑地交换位置。这种交互不仅直观，还能增强页面的动态感。今天，我们就来一步步实现这个效果，使用纯CSS的transition属性，无需JavaScript框架，轻松打造流畅的动画体验。
首先，我们需要构建基本的HTML结构。设想我们有两个并排显示的方块，每个方块用一个div表示。为了便于控制样式和动画，我们给它们设置类名，并包裹在一个容器中：
html
Box 1
Box 2
接下来是关键的CSS部分。为了让两个div能够“交换位置”，我们必须使用相对定位（position: relative），这样我们可以通过调整left或transform属性来改变它们的位置。这里我们选择使用transform: translateX()，因为它在动画性能上更优，不会触发重排，只涉及重绘和合成。
我们先设定基础样式：
css
.container {
display: flex;
width: 400px;
margin: 100px auto;
position: relative;
}
.box {
width: 180px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 8px;
transition: transform 0.5s ease-in-out;
}
.box1 {
background-color: #4CAF50;
margin-right: 20px;
}
.box2 {
background-color: #2196F3;
}
注意，我们在.box类中添加了transition属性，它指定了transform属性在变化时将拥有0.5秒的平滑过渡，缓动函数为ease-in-out，使动画开始和结束更自然。
现在，如何实现“交换”呢？我们可以利用CSS的:hover伪类，当用户悬停在容器上时，让两个盒子各自向对方的方向移动。具体来说，第一个盒子向右移动其自身宽度加上间距的距离，第二个盒子则向左移动相同的距离。
我们继续在CSS中添加以下规则：
css
.container:hover .box1 {
transform: translateX(200px);
}
.container:hover .box2 {
transform: translateX(-200px);
}
这里的200px是估算值，包含了box1的宽度（180px）和右边距（20px），确保它能准确移动到box2原来的位置。同理，box2向左移动相同距离。由于transition的存在，这一位置变化不再是瞬间完成，而是以流畅的动画形式展现。
你可能会问：能不能点击触发而不是悬停？当然可以。这时我们可以借助简单的JavaScript来切换一个类名，比如.swapped，然后在CSS中定义该状态下的变换：
css
.container.swapped .box1 {
transform: translateX(200px);
}
.container.swapped .box2 {
transform: translateX(-200px);
}
配合一段轻量JS：
javascript
document.querySelector('.container').addEventListener('click', function() {
this.classList.toggle('swapped');
});
这样一来，每次点击容器，两个盒子就会来回交换位置，动画依旧由CSS Transition驱动，丝滑自然。
此外，为了增强视觉反馈，我们还可以在动画过程中加入一些额外效果，比如颜色渐变、阴影变化或旋转微调。例如：
css
.box {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: transform 0.5s ease-in-out, box-shadow 0.3s;
}
.container:hover .box {
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
通过合理运用CSS Transition，我们不仅实现了元素的平滑位移，还提升了整体的交互质感。这种技术适用于卡片排序、选项切换、布局变换等多种场景，是前端开发中值得掌握的基础动画技能。
记住，动画的核心在于“自然”与“克制”。过度炫技反而会干扰用户，而恰到好处的过渡，才能真正服务于用户体验。
