Question

函数onclick没有显示带有转换的内容。但是功能隐藏，用过渡隐藏内容。请帮助我为什么我的show函数不适用于转换

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

如何在侧栏上不使用课程hidden。

转换本身right:-100%会为您隐藏侧边栏。

另外，请查看http://css3please.com（可能）最新的定义转换（和更多）样式的方法。

＆＃13;

  $('.panel a').on('click',function(event){
  	event.preventDefault();
  	var _thumbs =$(this).attr('data-name');
    show_content();
    $('#'+_thumbs).removeClass('hidden');
  });
  $('.close').on('click',function(event){
  	event.preventDefault();
    hide_content();
    });

function hide_content(){
  $('.sidebar').removeClass('sidebar-show');
  $('.sidebar').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(event) {
   $('.single-page').addClass('hidden');
   });
   
	}   
  	
function show_content(){
	$(".sidebar").off( "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend" );
	$('.single-page').addClass('hidden');
  
  $('.sidebar').addClass('sidebar-show')
}

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

转换在点击功能上没有用

2 个答案: