javascript、css转换函数

我有以下html格式的按钮：

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

如您所见，这些按钮调用函数

职能：

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

}

功能滑座（el）{
var elem=document.getElementById（el）；
elem.style.transition=“左0.5s缓进输出0s”；
elem.style.left=“0px”；
}
功能滑出（el）{
var elem=document.getElementById（el）；
elem.style.transition=“左0.5s缓进输出0s”；
elem.style.left=“1100px”；
}

这两个函数工作得非常好，但现在是最后一个函数：

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>

功能滑门（el）{
var elem=document.getElementById（el）；
elem.style.transition=“top 0.5s轻松进退0秒”；
elem.style.top=“-400px”；
elem.style.transition=“左0.5s缓进输出1s”；
elem.style.left=“1300px”；
}

此函数需要向下和向左移动，因此，“slideHome”函数也需要额外的一行代码来将其向后移动

问题是，在“slidePorto”函数中，它跳过了第一个过渡，它移动了，但不平稳，因此它快速移动到底部，然后向左移动。当我想返回顶部时，“slideHome”函数也存在同样的问题：0px

---

如何将这些转换组合在一起？提前谢谢

在脚本触发元素之前，可以在元素上指定多个转换

此代码指定了过渡，然后执行“顶部”部分，然后通过“左侧”过渡部分结束过渡

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

---

注意：我不明白你为什么指定-400px，但它适用于你想要的每一个值。

你能给一个JSFIDLE链接吗？这不是JSFIDLE的经验，但这里有一个链接，在这里根本不起作用。[link]这是我从[link]获得此代码的链接：[link]谢谢，我试图将

elem.style.transition

放在一行中，没有尝试过，谢谢，它可以工作-400px，因为这会使div向上移动，显示下面的内容。谢谢