전환이 적용되지 않았습니다.

Question

기능 onclick이 전환으로 내용을 표시하지 않았습니다. 하지만 숨기기 기능을 사용하면 전환으로 콘텐츠를 숨길 수 있습니다. 전환

function show_content(){ 
    $(".sidebar").off("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend"); 
    $('.single-page').addClass('hidden'); 
    if(!$('.sidebar').hasClass('sidebar-show')){ 
    $('.sidebar').removeClass('hidden').addClass('sidebar-show'); 
    } 
} 

link here

Answer 1

내 쇼 기능 didnt 한 작업이 전환은 .single-page 요소에 있어야하는 이유 도와 당신은 hidden 클래스 제거한 후 같은 것을 추가해야합니다하십시오

$('.sidebar').removeClass('hidden'); 
setTimeout(function() {$('.sidebar').addClass('sidebar-show');}, 0) 

을 link here

Answer 2

사이드 바에 hidden이 있습니다.

변환 자체 right:-100%은 사이드 바를 숨 깁니다.

또한 전환 (이상) 스타일을 정의하는 가장 최근의 방법은 http://css3please.com을 참조하십시오.

$('.panel a').on('click',function(event){ 
 
    \t event.preventDefault(); 
 
    \t var _thumbs =$(this).attr('data-name'); 
 
    show_content(); 
 
    $('#'+_thumbs).removeClass('hidden'); 
 
    }); 
 
    $('.close').on('click',function(event){ 
 
    \t event.preventDefault(); 
 
    hide_content(); 
 
    }); 
 

 
function hide_content(){ 
 
    $('.sidebar').removeClass('sidebar-show'); 
 
    $('.sidebar').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(event) { 
 
    $('.single-page').addClass('hidden'); 
 
    }); 
 
    
 
\t } 
 
    \t 
 
function show_content(){ 
 
\t $(".sidebar").off("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend"); 
 
\t $('.single-page').addClass('hidden'); 
 
    
 
    $('.sidebar').addClass('sidebar-show') 
 
}

#container{ 
 
    background: red; 
 
    height:100vh; 
 
    width:100%; 
 
} 
 
html{ 
 
    overflow-x: hidden; 
 
} 
 
body{ 
 
    margin:0; 
 
} 
 
.sidebar{ 
 
    position: absolute; 
 
    top:0; 
 
    right:-100%; 
 
    width: 500px; 
 
    background: green; 
 
-webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ 
 
      transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ 
 
} 
 

 
.sidebar-show{ 
 
    right:0; 
 
} 
 
.single-page{ 
 
} 
 
.hidden{ 
 
    display:none; 
 
} 
 
img{ 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="panel"> 
 
     <a href="#" data-name="test1">test1</a> 
 
     <a href="#" data-name="test2">test2</a> 
 
     <a href="#" data-name="test3">test3</a> 
 
    </div> 
 
</div> 
 

 
<div class="sidebar "> 
 
    <a href="" class="close">X</a> 
 
    <div id="test1" class="single-page hidden"> 
 
    <h1>test1</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam dolorum praesentium perferendis? Dolorem nesciunt soluta delectus eum maxime blanditiis neque rerum officia molestiae nulla natus quo alias laudantium animi, omnis iste dolorum aliquam tenetur repellat ipsam esse, dicta est. Dolore aliquam inventore doloremque sint quasi expedita cupiditate, a. Excepturi!</p> 
 
    <img src="http://via.placeholder.com/350x150" alt=""> 
 
    </div> 
 
    <div id="test2" class="single-page hidden"> 
 
    <h1>test2</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam dolorum praesentium perferendis? Dolorem nesciunt soluta delectus eum maxime blanditiis neque rerum officia molestiae nulla natus quo alias laudantium animi, omnis iste dolorum aliquam tenetur repellat ipsam esse, dicta est. Dolore aliquam inventore doloremque sint quasi expedita cupiditate, a. Excepturi!</p> 
 
    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt=""> 
 
    </div> 
 
    <div id="test3" class="single-page hidden"> 
 
    <h1>test3</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto veniam dolorum praesentium perferendis? Dolorem nesciunt soluta delectus eum maxime blanditiis neque rerum officia molestiae nulla natus quo alias laudantium animi, omnis iste dolorum aliquam tenetur repellat ipsam esse, dicta est. Dolore aliquam inventore doloremque sint quasi expedita cupiditate, a. Excepturi!</p> 
 
    <img src="https://www.w3schools.com/css/img_lights.jpg" alt=""> 
 
    </div> 
 
</div>