javascript，css转换功能

Question

I have these buttons in html:

<a href="#" onClick="slideHome('EntireSite');">Home</a>
<a  href="#" onClick="slideAbout('EntireSite');">About Me</a>
<a href="#" onClick="slidePorto('EntireSite');">Portofolio</a>

As you see, these buttons call functions

functions:

<script>
function slideHome(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in-out 0s";
elem.style.left = "0px";    
}


function slideAbout(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in-out 0s";
elem.style.left = "1100px";

}

these 2 work perfectly fine, but now the last function:

function slidePorto(el){
var elem = document.getElementById(el);
elem.style.transition = "top 0.5s ease-in-out 0s";
elem.style.top = "-400px";
elem.style.transition = "left 0.5s ease-in-out 1s";
elem.style.left = "1300px";     
}
</script>

This function needs to move down and to the left, as a result, the "slideHome" function get's a extra line of code to move it back as well.

The problem is, that in the "slidePorto"function, it skips the first transition, it moves, but not smoothly, so it quickly moves to the bottum, and then the transition to the left fires. Same problem for the "slideHome" function when I want to move back to top:0px;

How do I get these to transitions together? Thanks in advance!

Answer 1

You can specify multiple transitions on an element before trigerring them by the script.

This code specifies the transitions, then do the "top" part and after that ended the transition by the "left" transition part.

function slidePorto(el) {
    var elem = document.getElementById(el);
    elem.style.transition = "top 0.5s ease-in-out 0s,left 0.5s ease-in-out 1s";
    elem.style.top = "-400px";
    elem.style.left = "1300px";
}

NB: I don't understand why you specify -400px , but it works for every value you desire.