TranslateX 显示为动画

Question

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

这是一个展示它的小提琴：

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%;，那么我希望这些框位于其左侧 150 像素处，然后过渡到位。

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;

Answer 2

没有CSS animations 和calc function：

window.addEventListener("scroll", function(event) {
    
    var top, green, red, yellow;
  
    top = this.scrollY;
  
    green = document.querySelector("#green"),
    red   = document.querySelector("#red"),
    yellow= document.querySelector("#yellow");
    
    if(top > 100){
      green.classList.add("green", "active");
      red.classList.add("red", "active");
      yellow.classList.add("yellow", "active");
    }
}, false);

*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}

.box{
  width: 150px;
  height: 150px;
  opacity:0;
  position: absolute;
  transform: translateX(-150px);
  opacity:0
}

#green{
  background: green;
  left: 25%;
}
#red{
  background: red;
  left: 45%;
}
#yellow{
  background: yellow;
  left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}

#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}

<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

使用CSS animations 和calc function：

*{box-sizing:border-box}
body{margin: 0; padding-top: 20px}

.box{
  width: 150px;
  height: 150px;
  position: absolute
}

#green{
  background: green;
  left: 25%;
  animation:slideinGreen .3s ease
}
#red{
  background: red;
  left: 45%;
  animation:slideinRed .6s ease
}
#yellow{
  background: yellow;
  left: 65%;
  animation:slideinYellow .9s ease
}
@keyframes slideinGreen {
  from {
    left: calc(25% - 150px); opacity: 0
  }
}
@keyframes slideinRed{
  from {
    left: calc(45% - 150px); opacity: 0
  }
}
@keyframes slideinYellow {
  from {
    left: calc(65% - 150px); opacity: 0
  }
}

<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

现在您可以添加EventTarget.addEventListener() 和Element.classList

window.addEventListener("scroll", function(event) {
    
    var top, green, red, yellow;
  
    top = this.scrollY;
  
    green = document.querySelector("#green"),
    red   = document.querySelector("#red"),
    yellow= document.querySelector("#yellow");
    
    if(top > 100){
      green.classList.add("green", "active");
      red.classList.add("red", "active");
      yellow.classList.add("yellow", "active");
    }
}, false);

*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}

.box{
  width: 150px;
  height: 150px;
  opacity:0;
  position: absolute
}

#green{
  background: green;
  left: 25%;
}
#red{
  background: red;
  left: 45%;
}
#yellow{
  background: yellow;
  left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
  from {
    left: calc(25% - 150px);opacity:0
  }
}
@keyframes slideinRed{
  from {
    left: calc(45% - 150px);opacity:0
  }
}
@keyframes slideinYellow {
  from {
    left: calc(65% - 150px);opacity:0
  }
}

<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

Answer 3

您需要将 css 转换设置为：transition: all 1s; 因为你需要告诉你需要动画的属性。 并使用所有手段为所有 css 属性设置动画。还需要设置 display: inline-block

.info-box {
  border: 1px solid black;
  padding: 50px;
  background: #00f;
  color: #fff;
  display: inline-block;
  margin: 0 100px;
  transition:all 1s;
  opacity: 0;
}

Answer 4

转换不起作用，因为子 div 设置为 display:inline。

将其更改为 inline-block。

JSfiddle Demo