전환이 작동하지 않는 이유는 무엇입니까?

Question

"login"섹션과 "register"섹션이 있습니다. 불투명도가 변경되면 0.3 초 ​​걸리는 선형 전환이 필요합니다.

CSS :

당신이 홈페이지 HERE에 가서 전환과 함께 잘 작동 즉, 1. "쿼리", 에 #login 변화의 불투명도를 클릭

#login{ 
opacity: 0; 
transition:opacity 0.3s linear;} 

#register{ 
opacity: 0; 
display: none; 
transition:opacity 0.3s linear;} 

! Login-Form 아래의 "oder registriere dich neu"를 클릭하면 로그인 부분이 opacity: 0이되고 다시 display: none이됩니다. 또한 전환과 완벽하게 작동합니다. 등록-장 이상의

하지만의 (a setTimeout 500 밀리 초 후에.) 다음 opacity: 1을 display: block에 처하고 이를 전환 없어! 왜? "Hast du schon einen Account"를 클릭하면 다시 (로그인으로 돌아 가기 위해) 레지스터 블럭이 트랜지션으로 다시 페이드 아웃 될 것이고, 로그인 폼은 이되고 트랜지션을 다시하지 않을 것입니까?

다음은 혼탁을 설정하기위한 자바 스크립트 코드입니다 :

function changeSection(IDOut, IDIn) 
{ 
    var IDOut = "#" + IDOut; 
    var IDIn = "#" + IDIn; 

    hideSection(IDOut); 
    showSection(IDIn); 
} 

function hideSection(IDOut) 
{ 
    $(IDOut).css({opacity: "0"}); 
    setTimeout(function(){ 
     $(IDOut).css({display: "none"}); 
    },500); 
} 

function showSection(IDIn) 
{ 
    setTimeout(function(){ 
     $(IDIn).css({display: "block"}); 
     $(IDIn).css({opacity: "1"}); 
    },500); 

} 

IDOut가 제이다, 나는 (마녀 로그인에 대한 완벽한 작동 및 등록) 페이드 아웃하고 싶다.

IDIn은 섹션입니다. 페이드 인 (마녀는 로그인하지 말고 등록하십시오)!

왜 IDIn에서 전환이 작동하지 않습니까? 어떤 아이디어?

Answer 1

코드에 따라 전환이 작동하지 않습니다.

IDIn은 원래 display이라는 속성이 none이고 opacity은 0입니다.

함수 showSection에 따르면, 먼저가 500ms 대기하고 동시에 당신이 원하는에 display 및 opacity 재산 을 설정합니다. 동시성은 하나의 애니메이션 프레임에서 표시 및 불투명도가 동시에 변경되기 때문에 문제가되지만 브라우저는 하나의 속성을 선택하여 전송해야합니다. 그리고 display을 선택합니다.

기술적으로 전환은 표시되고 치수가있는 요소에서만 작동합니다. 폭과 높이는 0이 아니어야합니다. 따라서 display:none;은 전환을 취소합니다.

해결 방법은 간단하므로 외부에 display을 넣으십시오. 먼저 display을 변경하십시오.

네이티브 jQuery 메서드 fadeIn에 비해 이점은 jQuery의 기본 애니메이션보다 효율적인 css transition을 사용한다는 것입니다.

function showSection(IDIn) 
{   
    $(IDIn).css({display: "block"}); 
    setTimeout(function(){ 
     $(IDIn).css({opacity: "1"}); 
    },500); 

} 

Answer 2

당신은 jQuery를 사용하고 있습니다.이 작업을 더 간단하게 처리 할 수 ​​있고 jQuery가 처리하도록 할 수 있습니다. 대신 showSection 및 hideSection에 대한 코드의

, 사용 :

$('#yourselector').fadeIn(300); 

300 밀리 초의 시간에 요소를 퇴색하고, 수 :

$('#yourselector').fadeOut(300); 

은 숨길 수 있습니다.