显示子节时在父div上使用过渡展开

Question

我有一个容器div里面有一个表单，默认情况下submit按钮是隐藏的。单击WelcomeSettingSicon按钮时，我将在submit按钮中淡出，父div将自我扩展。这个扩展就像show/hide一样的snap。我想要的是添加一个过渡，这样父div就在submit按钮的淡入开始之前，通过submit按钮的空间过渡来扩展自己。

我使用的方法是从这个答案。但是，当我将它应用到代码中时，父div在扩展时没有得到过渡。此外，在submit按钮首次淡出后，div会迅速调整到它的新位置，当我再次关闭和打开时，按钮的高度会受到open类的影响，fadeIn会松动它的效果。

此外，当我移除类'open'时，.bottom-content的父母‘不会关闭。

HTML：

<div class="col-lg-6" style="background: lightblue">
 <div class="content content-narrow">
   <div class="block">
     <div class="block-header">
       <button type="button"><i id="welcomeSettingsIcon"></i></button>
     </div>
     <div class="block-content block-content-narrow" id="welcomePanel">
       <form id="welcomeForm">
         <section class="top-content">
            // form elements <br />
            // form elements <br />
            // form elements <br />          
            // form elements
         </section>
         <section class="bottom-content">
            <button id="welcomeSubmitBtn" type="submit">Btn</button>
         </section>
       </form>
    </div>
 </div>

CSS：

.bottom-content {
  transform: scaleY(0);
  transition: transform 250ms ease-in;
  transform-origin: top;
}

.bottom-content.open {
  transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
  opacity: 1;
}

#welcomeSubmitBtn {
  margin-top: 20px;
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 250ms;
}

jQuery：

jQuery(document).ready(function() {
    var welcomeForm = false;
    jQuery('#welcomeSettingsIcon').click(function() {
        if (welcomeForm) {
             jQuery('#welcomeSubmitBtn').css('opacity', 0);
             jQuery('#welcomeSubmitBtn').hide();
             jQuery('.bottom-content').removeClass('open'); 

             welcomeForm = false;
        } else {
             jQuery('#welcomeSubmitBtn').show();
             jQuery('#welcomeSubmitBtn').css('opacity', 1);
             jQuery('.bottom-content').addClass('open');   

             welcomeForm = true;
        }
    }
})

Answer 1

我不是100%清楚你在找什么，所以让我知道如果这是接近的。我认为不需要open类，除非您真的希望在CSS中完成所有操作：

null

jQuery(document).ready(function() {
  var welcomeForm = false;

  jQuery('#welcomeSettingsIcon').click(function() {
    if (welcomeForm) {

      jQuery('#welcomeSubmitBtn').hide();
      jQuery('.bottom-content').hide();

      welcomeForm = false;

      //jQuery('#welcomeSubmitBtn').css('opacity', 0);
      //jQuery('#welcomeSubmitBtn').hide();
      //jQuery('.bottom-content').removeClass('open');

    } else {

      jQuery('.bottom-content').slideDown(2000, function() {

        jQuery('#welcomeSubmitBtn').fadeIn();
        welcomeForm = true;

        //jQuery('#welcomeSubmitBtn').show();
        //jQuery('#welcomeSubmitBtn').css('opacity', 1);
        //jQuery('.bottom-content').addClass('open');
      })
    }
  });
});

/* .bottom-content {
  transform: scaleY(0);
  transition: transform 250ms ease-in;
  transform-origin: top;
}
.bottom-content.open {
  transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
  opacity: 1;
}
#welcomeSubmitBtn {
  margin-top: 20px;
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 250ms;
}

*/

.bottom-content {
  display: none;
  height: 60px;
}
#welcomeSubmitBtn {
  display: none;
  margin-top: 20px;
}

html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="col-lg-6" style="background: lightblue">
  <div class="content content-narrow">
    <div class="block">
      <div class="block-header">
        <button type="button" id="welcomeSettingsIcon">Click Me
        </button>
      </div>
      <div class="block-content block-content-narrow" id="welcomePanel">
        <form id="welcomeForm">
          <section class="top-content">
            // form elements
            <br />// form elements
            <br />// form elements
            <br />// form elements
          </section>
          <section class="bottom-content">
            <button id="welcomeSubmitBtn" type="submit">Btn</button>
          </section>
        </form>
      </div>
    </div>
  </div>
</div>