轉換沒有工作點擊功能

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

我的播放功能沒有工作的過渡應該是.single-page元素，你需要刪除hidden下課後添加如下內容：

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

link here

Answer 2

如何不使用c lass 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>