javascript - TranslateX 显示为动画

Question

我正在尝试使用更多的 css 和更少的 Javascript 来制作动画。我遇到了动画三个不同盒子的问题。我通过添加 fadeShow 类使不透明度为 1，使框以不透明度淡入淡出。但是，我希望框看起来好像是从页面左侧到页面左侧的动画对。

这是一个 fiddle ，展示了它的实际效果:

Click here to see

.info-box {
  border: 1px solid black;
  padding: 50px;
  background: #00f;
  color: #fff;
  display: inline;
  margin: 0 100px;
  transition: 1s;
  opacity: 0;
}
.info-box.fadeShow {
  opacity: 1;
  transform: translateX(150px);
}

我正在尝试让方框在 150 像素以上进行动画处理，或者如果有更好的方法可以将方框置于其永久状态。我的意思是，如果框应该位于 left: 25%;，left: 45%; 和 left: 65%;，然后我希望框在其左侧 150px，然后过渡到位。

Answer 1

首先，要让框从左侧滑过，您应该对 .info-box 类应用负变换:

transform:translatex(-150px);

然后在.fadeShow类中重新设置:

transform:initial;

其次，您将 .info-box 类的 display 属性设置为 inline，您需要将其更改为转换不能应用于内联元素。

最后，出于性能目的，最好明确说明要将转换应用于哪些属性:

transition:opacity 1s,transform 1s;

或者:

transition-duration:1s;
transition-property:opacity,transform;