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

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>