javascript - 显示隐藏动画不起作用

Question

我需要顺利实现显示隐藏动画。

我在 codepen 中有我想要的示例

我会复制我的 layout 中的所有内容更改类名添加额外的 div(使用类名 group hide)，如示例中添加 jQuery 配置代码，但这不起作用。

问题是我认为 on 类。在我的情况下它不起作用。当 button click 时，它​​必须添加到 group 类中> 被触发。

请帮忙

// js to the rescue
var b = $('body');
var isToggled = false; // default state
var origTextStr = b.find('button').text();

$(document).on('click', 'button', function(){
	
	var t = $(this),
			next = t.nextAll('.group').first(),
			nextObj = t.nextAll('.design_block');
	
	// change text str
	if( !isToggled ) { t.text('Hide more'); } else { t.text(origTextStr); }
	
	// get height of 'next'
	var nextHeight = next.height() + 'px';
	
	// add transform to all 'next'
	if( !isToggled ){
		nextObj.css('transform', 'translateY('+ nextHeight +')');
		next.addClass('on');
		//addClass('on');
		isToggled = true;
	}
	else {
		nextObj.css('transform','translateY(0)');
		next.removeClass('on');
		isToggled = false;
	}
	
});

body.on {
  overflow: hidden;
}

.our_works {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}
.our_works .design_block {
  width: 210px;
  margin-bottom: 20px;
  overflow: hidden;
  backface-visibility: hidden;
}
.our_works .architecture_img {
  width: 210px;
  height: 198px;
}
.our_works .more_posts {
  margin-top: 15px;
  border-radius: 2px;
  background-color: #2a323d;
  padding: 12px 0 13px 0;
  color: #fff;
  width: 200px;
  border: none;
  margin: 0 auto;
}
.our_works .more_posts a {
  color: #fff;
}
.our_works .more_posts a:hover {
  text-decoration: none;
}

.group {
  position: absolute;
  z-index: 0;
  left: 0;
}
.group .design_block {
  opacity: 0;
  transform: translateY(100px);
  visibility: hidden;
}
.group .design_block:nth-child(1) {
  transition-delay: 0.1s;
}
.group .design_block:nth-child(2) {
  transition-delay: 0.15s;
}

.group.on .design_block {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.design_block {
  transform: translateY(0);
  transition: all 1s cubic-bezier(0.4, 0, 0, 1);
  width: 100%;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="our_works">
      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6>
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE</h6>
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6>
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div>
      </div>


      <!-- hidden blocks -->
    <div class="group hide">
      
      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6>
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">ARCHITECTURE</h6>
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY HOMES</h6>
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div>
      </div>

      <div class="design_block">
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img">
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6>
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div>
      </div>
 </div>
      <button class="more_posts">
        <a href="javascript:void(0)">More</a>
      </button>
    </div>
  </div>
</div>

Answer 1

关键是你的按钮在 DOM 中group 元素和 jquery 试图找到 next 元素只需将它移到上方，on 就会被触发。