クリック機能では動作しませんでした

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>