如何相对于之前的翻译进行“转换：翻译”？

Question

我有以下工作代码，我正在尝试简化：

[tt] {
  position: relative;
}
[tt]::after {
  bottom: 100%;
  content: attr(tt);
  padding: 5px;
  background: #333;
  color: #fff;
}
[tt]::before,
[tt]::after {
  position: absolute;
/* Middle 3 */
  left: 50%;
  transform: translate(-50%, 50%);
}
/* First 3 */
[tt]:nth-child(-n+3)::before,
[tt]:nth-child(-n+3)::after {
  transform: translate(0 , 50%);
}
/* Last 3 */
[tt]:nth-last-child(-n+3)::before,
[tt]:nth-last-child(-n+3)::after {
  transform: translate(-100%, 50%);
}
/* add animation */
[tt]:hover::before,
[tt]:hover::after {
  animation: tt-move1 100ms ease-out forwards;
  display: block;
}
[tt]:nth-child(-n+3):hover::before,
[tt]:nth-child(-n+3):hover::after {
  animation: tt-move2 100ms ease-out forwards;
}
[tt]:nth-last-child(-n+3):hover::before,
[tt]:nth-last-child(-n+3):hover::after {
  animation: tt-move3 100ms ease-out forwards;
}
@keyframes tt-move1 {
  to {
    transform: translate(-50%, 0);
  }
}
@keyframes tt-move2 {
  to {
    transform: translate(0, 0);
  }
}
@keyframes tt-move3 {
  to {
    transform: translate(-100%, 0);
  }
}

/*For working demo*/
div {
  /*won't work unless set relative, Something that happens in [tt]*/
  top:100px;
  margin: 10px;
  float:left;
  width: 20px;
  height: 20px;
  border: black solid 3px;
}

<div tt="tt1"></div>
<div tt="tt2"></div>
<div tt="tt3"></div>
<div tt="tt4"></div>
<div tt="tt5"></div>
<div tt="tt6"></div>
<div tt="tt7"></div>
<div tt="tt8"></div>
<div tt="tt9"></div>

上面的代码对于每种不同类型的元素都有特定的动画，这似乎是不必要的。据我所知，我只是对每个元素应用相同的变换（沿 y 轴向上移动元素），因此我预计以下内容也应该有效：

[tt] {
  position: relative;
}
[tt]::after {
  bottom: 100%;
  content: attr(tt);
  padding: 5px;
  background: #333;
  color: #fff;
}
[tt]::before,
[tt]::after {
  position: absolute;
/* Middle 3 */
  left: 50%;
  transform: translate(-50%, 50%);
}
/* First 3 */
[tt]:nth-child(-n+3)::before,
[tt]:nth-child(-n+3)::after {
  transform: translate(0 , 50%);
}
/* Last 3 */
[tt]:nth-last-child(-n+3)::before,
[tt]:nth-last-child(-n+3)::after {
  transform: translate(-100%, 50%);
}

/*****************Changed code*******************/

/* add animation */
[tt]:hover::before,
[tt]:hover::after {
  animation: tt-move 100ms ease-out forwards;
  display: block;
}
@keyframes tt-move {
  to {
    transform: translateY(0);
  }
}
/*///////////////Changed code/////////////////*/

/*For working demo*/
div {
  /*won't work unless set relative, Something that happens in [tt]*/
  top:100px;
  margin: 10px;
  float:left;
  width: 20px;
  height: 20px;
  border: black solid 3px;
}

<div tt="tt1"></div>
<div tt="tt2"></div>
<div tt="tt3"></div>
<div tt="tt4"></div>
<div tt="tt5"></div>
<div tt="tt6"></div>
<div tt="tt7"></div>
<div tt="tt8"></div>
<div tt="tt9"></div>

经过一番研究，我现在明白

transform: translateY(Δy);

与说

transform: translate(0,Δy);

是一样的，这导致了意想不到的结果。 不幸的是，这是我能找到的唯一方法，看起来它应该做我想做的事。

我正在寻找一种

transform:translate

的方法，允许前一个

transform:translate

的 x 轴保持不变，而仅更改 y 轴。

是否有不同的方法来实现这种简化？ 还是我一直在使用上面的重复代码？

Answer 1

制作动画时

transform

，您必须添加任何已设置的值，否则它们将暂时被覆盖。

在这种情况下，您可以改为动画

bottom

，这将给出您想要的输出。

[tt] {
  position: relative;
}
[tt]::after {
  bottom: 100%;
  content: attr(tt);
  padding: 5px;
  background: #333;
  color: #fff;
}
[tt]::before,
[tt]::after {
  position: absolute;
/* Middle 3 */
  left: 50%;
  transform: translate(-50%, 50%);
}
/* First 3 */
[tt]:nth-child(-n+3)::before,
[tt]:nth-child(-n+3)::after {
  transform: translate(0 , 50%);
}
/* Last 3 */
[tt]:nth-last-child(-n+3)::before,
[tt]:nth-last-child(-n+3)::after {
  transform: translate(-100%, 50%);
}

/*****************Changed code*******************/

/* add animation */
[tt]:hover::before,
[tt]:hover::after {
  animation: tt-move 100ms ease-out forwards;
}
@keyframes tt-move {
  to {
    bottom: 170%;
  }
}
/*///////////////Changed code/////////////////*/

/*For working demo*/
div {
  /*won't work unless set relative, Something that happens in [tt]*/
  top:100px;
  margin: 10px;
  float:left;
  width: 20px;
  height: 20px;
  border: black solid 3px;
}

<div tt="tt1"></div>
<div tt="tt2"></div>
<div tt="tt3"></div>
<div tt="tt4"></div>
<div tt="tt5"></div>
<div tt="tt6"></div>
<div tt="tt7"></div>
<div tt="tt8"></div>
<div tt="tt9"></div>