点击触发元素居中动画：按钮层级切换效果实现需求

我有三个按钮，需要实现以下两种方案中的任意一种：

• 添加动画效果，使每次有一个按钮显示在前方，另外两个退至后方；
• 或者，点击某个按钮时，该按钮显示在前方，其余按钮退至后方。

原代码 #

CSS样式

.index-environement-specialise-boutton-main { width: 279px; height: 76px; border: 1px solid var(--color-text-primary); border-radius: 46px; text-align: center; font-style: normal !important; font-variant: normal !important; font-weight: bold !important; font-size: 32px !important; line-height: 34px !important; font-family: Poppins !important; letter-spacing: 0.5px; color: var(--color-text-primary); opacity: 1; margin-inline: 2.625rem; position: relative; box-shadow: 0px 0px 222px 150px rgba(193, 186, 243, 0.75); -webkit-box-shadow: 0px 0px 222px 150px rgba(193, 186, 243, 0.75); -moz-box-shadow: 0px 0px 222px 150px rgba(193, 186, 243, 0.75); display: flex; align-items: center; justify-content: center; }.index-environement-specialise-boutton-main.b1 { background: #C1BAF3 0% 0% no-repeat padding-box; }.index-environement-specialise-boutton-main.b2 { background: #F8D6B5 0% 0% no-repeat padding-box; }.index-environement-specialise-boutton-main.b3 { background: #F3B9C5 0% 0% no-repeat padding-box; }.index-environement-specialise-boutton-behind { width: 176px; height: 48px; border: 1px solid var(--color-text-primary); border-radius: 46px; text-align: center; font-style: normal !important; font-variant: normal !important; font-weight: bold !important; font-size: 20px !important; line-height: 21px !important; font-family: Poppins !important; letter-spacing: 0.5px; color: var(--color-text-primary); opacity: 1; display: flex; align-items: center; justify-content: center; }.index-environement-specialise-boutton-behind.b1 { background: #C1BAF3 0% 0% no-repeat padding-box; }.index-environement-specialise-boutton-behind.b2 { background: #F8D6B5 0% 0% no-repeat padding-box; }.index-environement-specialise-boutton-behind.b3 { background: #F3B9C5 0% 0% no-repeat padding-box; }.index-environement-specialise-boutton-main:hover,.index-environement-specialise-boutton-behind:hover { color: var(--color-text-primary); }.index-environement-specialise-col-right{width:700px;}

HTML结构

<div class="w-100 index-environement-specialise-col-right"> 
  <a class="index-environement-specialise-boutton-behind b2" role="button" href="javascript:void(0)" id="A2" runat="server" title="hôtesses"> 
    hôtesses 
  </a> 
  <a class="index-environement-specialise-boutton-main b1" role="button" href="javascript:void(0)" id="A3" runat="server" title="sitters"> 
    sitters 
  </a> 
  <a class="index-environement-specialise-boutton-behind b3" role="button" href="javascript:void(0)" id="A4" runat="server" title="vendeurs"> 
    vendeurs 
  </a> 
</div>

方案一：自动轮播动画 #

先调整布局让按钮可重叠，再用JS实现定时切换：

修改后的CSS #

.index-environement-specialise-col-right {
  width: 700px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 76px;
}
.index-environement-specialise-boutton-main,
.index-environement-specialise-boutton-behind {
  position: absolute;
  transition: all 0.5s ease;
}
.index-environement-specialise-boutton-main {
  z-index: 2;
  margin-inline: 0;
}
.index-environement-specialise-boutton-behind {
  z-index: 1;
}
.index-environement-specialise-boutton-behind.left {
  transform: translateX(-120px);
}
.index-environement-specialise-boutton-behind.right {
  transform: translateX(120px);
}

轮播控制JS #

const container = document.querySelector('.index-environement-specialise-col-right');
const buttons = Array.from(container.querySelectorAll('a'));
let currentIndex = 0;

function cycleActiveButton() {
  // 重置所有按钮为后方状态
  buttons.forEach(btn => {
    btn.classList.remove('index-environement-specialise-boutton-main');
    btn.classList.add('index-environement-specialise-boutton-behind');
    btn.classList.remove('left', 'right');
  });
  // 设置当前按钮为主按钮
  const activeBtn = buttons[currentIndex];
  activeBtn.classList.remove('index-environement-specialise-boutton-behind');
  activeBtn.classList.add('index-environement-specialise-boutton-main');
  // 分配左右后方按钮位置
  const leftIndex = (currentIndex - 1 + buttons.length) % buttons.length;
  const rightIndex = (currentIndex + 1) % buttons.length;
  buttons[leftIndex].classList.add('left');
  buttons[rightIndex].classList.add('right');
  // 更新索引
  currentIndex = (currentIndex + 1) % buttons.length;
}

// 初始化+定时切换
cycleActiveButton();
setInterval(cycleActiveButton, 3000);

方案二：点击切换按钮状态 #

同样调整布局，添加点击事件实现切换：

修改后的CSS #

和方案一的CSS一致。

点击控制JS #

const container = document.querySelector('.index-environement-specialise-col-right');
const buttons = Array.from(container.querySelectorAll('a'));

// 初始化初始状态
function setInitialState() {
  buttons.forEach((btn, index) => {
    if (btn.classList.contains('index-environement-specialise-boutton-main')) {
      btn.classList.remove('left', 'right');
    } else {
      btn.classList.add(index === 0 ? 'left' : 'right');
    }
  });
}

// 设置主按钮函数
function setActiveButton(activeBtn) {
  buttons.forEach(btn => {
    btn.classList.remove('index-environement-specialise-boutton-main');
    btn.classList.add('index-environement-specialise-boutton-behind');
    btn.classList.remove('left', 'right');
  });
  activeBtn.classList.remove('index-environement-specialise-boutton-behind');
  activeBtn.classList.add('index-environement-specialise-boutton-main');
  // 分配其他按钮的左右位置
  const activeIndex = buttons.indexOf(activeBtn);
  buttons.forEach((btn, index) => {
    if (btn !== activeBtn) {
      btn.classList.add(index < activeIndex ? 'left' : 'right');
    }
  });
}

// 初始化+绑定点击事件
setInitialState();
buttons.forEach(btn => {
  btn.addEventListener('click', () => setActiveButton(btn));
});

内容的提问来源于stack exchange，提问作者Rad