转换没有工作点击功能

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>