Question

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

这是一个小提琴，展示了它的实际效果：

.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;

其次，您将display类的.info-box属性设置为inline，您需要更改它，因为转换无法应用于内联元件。

最后，出于性能目的，最好明确说明要应用转换的属性：

transition:opacity 1s,transform 1s;

或者：

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

Answer 2

你需要将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 3

转换无效，因为子div设置为display:inline。

将其更改为inline-block。

JSfiddle Demo

Answer 4

没有CSS animations和calc function：

*{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>

*{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
  }
}

CSS animations和calc function：

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

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);

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

*{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>

{{1}}

TranslateX显示为动画

4 个答案: