显示隐藏动画失效求助：实现平滑动画遇阻（附代码）

我看了你的代码，发现几个关键问题导致动画无法正常触发，尤其是.on类没正确添加到.group上，下面一步步帮你修复：

问题分析 #

1. 选择器逻辑错误：你用t.nextAll('.design_block')获取需要平移的元素，但这些元素其实是按钮前面的.design_block，而不是后面的；后面的.design_block属于.group内部，不需要平移。同时，直接用nextAll('.group')依赖元素的同级顺序，不够健壮，如果按钮位置变化就会失效。
2. 定位布局问题：.group设置了position:absolute，但父容器.our_works没有position:relative，导致.group相对于整个文档定位，位置完全错乱，动画自然看不到。
3. 隐藏元素高度获取错误：初始状态下.group是隐藏的（opacity:0、visibility:hidden），直接用.height()获取的高度是0，导致平移距离不对。

修改后的完整代码 #

JavaScript 部分 #

// js to the rescue
var b = $('body');
var isToggled = false; // 默认状态
var origTextStr = b.find('.more_posts').text(); // 用类选择器更精准

$(document).on('click', '.more_posts', function(){
  var t = $(this);
  var ourWorksContainer = t.closest('.our_works'); // 获取按钮所在的父容器
  var groupElement = ourWorksContainer.find('.group').first(); // 找到容器内的.group
  var targetDesignBlocks = ourWorksContainer.find('.design_block:not(.group .design_block)'); // 只选中.group外的卡片

  // 切换按钮文字
  t.text(isToggled ? origTextStr : 'Hide more');

  // 处理高度：第一次显示时，临时显示.group获取真实高度
  var groupHeight = 0;
  if (!isToggled) {
    // 临时显示元素获取高度
    groupElement.css({opacity: 1, visibility: 'visible', height: 'auto'});
    groupHeight = groupElement.height();
    // 恢复初始隐藏状态
    groupElement.css({opacity: 0, visibility: 'hidden', height: ''});
  }

  // 触发动画逻辑
  if (!isToggled) {
    targetDesignBlocks.css('transform', 'translateY(' + groupHeight + 'px)');
    groupElement.addClass('on');
    isToggled = true;
  } else {
    targetDesignBlocks.css('transform', 'translateY(0)');
    groupElement.removeClass('on');
    isToggled = false;
  }
});

CSS 部分 #

body.on { overflow: hidden; } 

.our_works {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  position: relative; /* 新增：让子元素的absolute定位基于此容器 */
} 

.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;
  cursor: pointer; /* 新增：提示可点击 */
} 

.our_works .more_posts a { color: #fff; } 
.our_works .more_posts a:hover { text-decoration: none; } 

.group {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 100%; /* 新增：让.group初始在父容器底部 */
  width: 100%; /* 新增：和父容器同宽，保证布局一致 */
} 

.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;
}

HTML 部分（补全你未闭合的标签） #

<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">Sample content for this block</div>
      </div>
      <button class="more_posts">Show more</button>
      <div class="group">
        <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">HIDDEN BLOCK 1</h6>
          <div class="preview_design_block">Hidden content 1</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">HIDDEN BLOCK 2</h6>
          <div class="preview_design_block">Hidden content 2</div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 选择器优化：用closest('.our_works')获取父容器，不再依赖元素的同级顺序，代码更健壮；区分.group内外的.design_block，确保动画只应用到正确的元素。
• 定位修复：给.our_works添加position:relative，让.group相对于它定位，同时设置.group的top:100%和width:100%，保证初始位置正确。
• 高度获取修复：临时显示.group获取真实高度，解决隐藏元素高度为0的问题，确保平移距离准确。
• 细节优化：给按钮添加cursor:pointer，提升用户体验；补全未闭合的HTML标签，避免布局异常。

内容的提问来源于stack exchange，提问作者Randall