CSS3 전환을 반복 할 수 없음

전환 효과는 한 번만 실행되지만 다른 탭을 클릭하면 작동하지 않습니다. 매번 탭을 변경할 때 실행하는 방법은 무엇입니까?CSS3 전환을 반복 할 수 없음

탐색 버튼을 클릭하면 내용이 전환 효과와 함께 표시되어야합니다. HTML :

<body onload="setCurrent('home','home_content')"> 
<div id="wrap" class="center"> 
    <div class="top"> 
     <header class="left"> 
      <h1><a href="#">transition</a></h1> 
     </header> 
    </div> 
    <div class="right"> 
     <nav class="menu"> 
      <ul> 
       <li><a class="" id="home" onclick="setCurrent('home','home_content')">Home</a></li> 
       <li><a class="" id="about" onclick="setCurrent('about','about_content')">About</a></li> 
      </ul> 
     </nav> 
    </div> 
    <div id="main"> 
     <div id="place"> 
      <div id="home_content" class="content"> 
       <h3>Home</h3> 
      </div> 
      <div id="about_content" class="content"> 
       <h3>About</h3> 
      </div> 
     </div> 
    </div> 
</div>

CSS :

#place .content{ 
    height: 1px; 
    padding: 20px; 
    margin: 0; 
    overflow: hidden; 
    transition:all 2s ease; 
    -moz-transition:all 2s ease; /* Firefox 4 */ 
    -webkit-transition:all 2s ease; /* Safari and Chrome */ 
    -o-transition:all 2s ease; /* Opera */ 
    -ms-transition:all 2s ease; /* MS */ 
} 
#place .hide{ 
    display:none; 
} 

#place .expand{ 
    display:block; 
    height:500px; 
    background-color:#f00; 
}

JS :

function setCurrent(current,currentContent){ 
    document.getElementById('home').className = 'none'; 
    document.getElementById('about').className = 'none'; 

    document.getElementById('home_content').classList.remove('expand'); 
    document.getElementById('about_content').classList.remove('expand'); 

    document.getElementById('home_content').classList.add('hide'); 
    document.getElementById('about_content').classList.add('hide'); 

    document.getElementById(current).className='current'; 
    document.getElementById(currentContent).classList.remove('hide'); 
    document.getElementById(currentContent).classList.add('expand'); 
    return; 
}

출처

2012-09-05 Desman

어려운 부분은 당신이 디스플레이를 애니메이션을 적용 할 것입니다 : 없음 – SoonDead

새 사용자이기 때문에 여기 : 아래 답변 중 하나라도 해결책을 제시하면 동의하십시오. 또한 대답이 유용하다면 주저하지 말고 투표하십시오. – SoonDead

: 제대로 것도,이 같은 솔루션을 제안하지 않을 것이다

당신은 전환이 당신이 자바 스크립트의 비트를 추가 할 수 있습니다 완료된 후 display: none을 설정하려면 당신은 몇 가지 변경 사항이 볼 수 있듯이 http://jsfiddle.net/VgLEG/5/

는 :

는

숨겨진 클래스가있을 수 souldn't. 기본적으로 모든 콘텐츠가 숨겨지기를 원합니다. 이렇게하면 나중에 불일치가 줄어들 것입니다.

대신 디스플레이 없음의

, 내가

#place .content{ 
    height: 0; 
    padding: 0 20px; 
    opacity: 0; 
} 

#place .content.expand{ 
    height:500px; 
    padding: 20px; 
    opacity: 1; 
    background-color:#f00; 
}

애니메이션하기 위해 어떤 브라우저가 알고있는이 방법 제안 : 그것은 (불투명) 페이드 것, 그것은/아래 (높이)를 밀어도 너무 패딩을 애니메이션합니다 이는 요소 너비에 추가됩니다.

(이것은 jQuery로 쉬울 것, 또한 IE8에서 일하는 것이 다른 오래된 브라우저는 CSS 애니메이션을 지원하지 않습니다.)

출처

2012-09-05 09:31:32 SoonDead

고마워요! jquery에이 사건과 같은 샘플이 있습니까? – Desman

다음을 확인하십시오. http://api.jquery.com/slideDown/ 원하는대로 슬라이드 업과 함께이 작업을 수행하십시오. – SoonDead

당신은 CSS 전환과 display: none; 및 display: block; 사이를 전환 할 수 없습니다. 나는 당신이 달성하고자하는 효과가 있지만, 변경에 대한 확실하지 않다

...

#place .hide{ 
    opacity: 0; 
}

당신이 무슨 일이 일어나고 있는지 이해하는 데 도움이 될 것입니다. 당신이 화면을 애니메이션 할 수 없기 때문에

// webkitTransitionEnd: Opera and Chrome 
// transitionend: Firefox and IE 10 
// otransitionend: Opera >= 12 
// oTransitionEnd: Opera < 12 
// http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/ 

$('#place .hide').on('transitionend otransitionend oTransitionEnd webkitTransitionEnd', function(){ 
    $(this).hide() 
})

출처

2012-09-05 08:55:32 Duopixel

CSS3 전환을 반복 할 수 없음

답변

관련 문제