자바 스크립트, CSS를 전환

Question

내가 HTML에서이 버튼이 기능

<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"함수 get은 코드를 다시 이동시키는 추가 코드 줄을 가져옵니다.

문제는 "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"; 
} 

NB : 당신이 -400px를 지정 이유를 이해하지 않지만, 당신이 원하는 모든 값을 사용할 수 있습니다.