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