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%;，那么我希望箱子左侧150px，然后过渡到位。

Answer 1

没有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 2

您需要将css转换为：transition：all 1s; 因为你需要告诉你需要动画的属性。 并使用所有手段动画所有CSS属性。还需要设置显示：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

首先，有箱子从左侧滑过，你应该申请负转变为.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 4

变换不工作，因为孩子的div设置为display:inline。

将其改为inline-block。

JSfiddle Demo