TranslateX erscheint als animierend

Question

Ich versuche, mehr CSS und weniger Javascript für die Animation zu verwenden. Ich stoße auf ein Problem, bei dem drei verschiedene Boxen animiert werden. Ich lasse die Boxen mit Deckkraft einblenden, indem ich die Klasse fadeShow hinzufüge, um die Deckkraft auf 1 zu bringen. Allerdings möchte ich, dass die Felder so aussehen, als würden sie von links nach rechts animieren. Hier

ist eine Geige, die sie in Aktion zeigt:

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

Ich versuche, die Boxen animieren über 150px zu machen, oder wenn es einen besseren Weg, dies zu tun, um die Boxen zu setzen in ihren gültigen Zustand. Was ich damit meine ist, wenn die Boxen bei left: 25%;, left: 45%; und left: 65%; sein sollen, dann würde ich wollen, dass die Boxen 150px links davon sind und dann an ihren Platz gehen.

Answer 1

Ohne CSS animations und 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>

Mit CSS animations und 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>

Jetzt Sie EventTarget.addEventListener() und 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

Sie müssen css Übergang zu: Übergang: alle 1s; da Sie wissen müssen, welche Eigenschaften Sie animieren müssen. und mit allen Mitteln animiert alle CSS-Eigenschaften. auch müssen Sie Anzeige einstellen: 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

Zuerst werden die Boxen von links gleiten über haben, sollten Sie die negative Transformation auf die .info-box Klasse gelten:

transform:translatex(-150px); 

Und dann zurückgesetzt es in der .fadeShow Klasse:

transform:initial; 

Zweitens

, haben Sie die display Eigenschaft der .info-box Klasse auf inline müssen Sie dies ändern, da Transformationen nicht auf Inline-Elemente angewendet werden können.

schließlich für Leistungszwecke, ist es am besten, welche Eigenschaften Sie Übergänge, ausdrücklich zu erwähnen anwenden möchten:

transition:opacity 1s,transform 1s; 

Oder:

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

Answer 4

Die Transformation wird nicht funktionieren, weil das Kind divs sind auf eingestellt.

Ändern Sie das zu inline-block.

JSfiddle Demo