javascript, css 过渡函数

Question

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

}

这 2 个工作得很好，但现在是最后一个功能:

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>

此函数需要向下和向左移动，因此，“slideHome”函数需要额外的一行代码才能将其移回。

问题是，在“slidePorto”函数中，它跳过了第一个过渡，它移动了，但并不平滑，所以它快速移动到底部，然后触发向左的过渡。当我想回到顶部时，“slideHome”功能也有同样的问题:0px；

如何将这些转换在一起？提前致谢!

Answer 1

您可以在一个元素上指定多个转换，然后再通过脚本触发它们。

此代码指定转换，然后执行“顶部”部分，然后通过“左”转换部分结束转换。

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，但它适用于你想要的每个值。