回答你问题的第一段，答案是肯定的，你可以使用不同的类来打开和关闭transition规则。
在此代码段中，.d1样式规则指定transition: 1.5s，.d1.raised规则指定transition: none。因此，当通过按下按钮添加raised类时，不使用任何转换，但当通过第二次按下按钮将其删除时，使用1.5秒的转换。你会看到，当你按下按钮时，左边一组方块中的红色方块立即出现在前面（z-index: 5），然后当你再次按下按钮时，红色方块在1.5秒内缓慢移动到后面（z-index: 1）。请注意，您还需要在其他正方形上设置特定的z索引，以使此过渡工作。还要注意，因为z-index是一个 integer 值，所以它会逐步过渡，而不是平滑过渡。
相比之下，opacity平滑过渡，因为它是 decimal 值。右侧的一组正方形使用不透明度过渡，而不是z索引过渡。

document.querySelector('.b1').addEventListener('click', evt => {
  document.querySelectorAll('.d1, .d9').forEach(e => {
    e.classList.toggle('raised')
  })
  evt.target.innerHTML = 'push me again'
})

body {
  margin-top: 170px;
}
.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9 {
  width: 100px;
  height: 100px;
  position: absolute;
  color: white;
}
.d1 {
  background: red;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 1.5s;
}
.d1.raised {
  z-index: 5;
  transition: none;
}
.d2 {
  background: green;
  top: 15px;
  left: 15px;
  z-index: 2;
}
.d3 {
  background: blue;
  top: 30px;
  left: 30px;
  z-index: 3;
}
.d4 {
  background: pink;
  top: 45px;
  left: 45px;
  z-index: 4;
}
.d5 {
  background: red;
  top: 0;
  left: 200px;
  z-index: 1;
}
.d6 {
  background: green;
  top: 15px;
  left: 215px;
  z-index: 2;
}
.d7 {
  background: blue;
  top: 30px;
  left: 230px;
  z-index: 3;
}
.d8 {
  background: pink;
  top: 45px;
  left: 245px;
  z-index: 4;
}
.d9 {
  background: red;
  top: 0;
  left: 200px;
  z-index: 4;
  opacity: 0;
  transition: 1.5s;
}
.d9.raised {
  opacity: 1;
  transition: none;
}

<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<div class="d4">d4</div>

<div class="d5">d5</div>
<div class="d6">d6</div>
<div class="d7">d7</div>
<div class="d8">d8</div>
<div class="d9">d9</div>

<button class="b1">push me</button>