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

Posted 2023-02-23

【中文标题】显示子部分时在父 div 上使用过渡展开

【英文标题】：Expanding with transition on parent div when displaying child section

【发布时间】：2017-03-14 05:29:45

【问题描述】：

我有一个容器 div，里面有一个表单，默认情况下提交按钮是隐藏的。在单击welcomeSettingsIcon 按钮时，我正在淡入提交按钮，并且父 div 会自行扩展。这种扩展就像显示/隐藏一样。我想要的是添加一个过渡，以便父 div 在提交按钮的淡入开始之前通过提交按钮空间的过渡扩展自身。

我使用的方法是from this answer。但是，当我将它应用到我的代码时，父 div 在扩展时没有获得过渡。此外，在提交按钮第一次淡入后，div 会捕捉到它的新位置，当我再次关闭并打开时，按钮的高度会受到open 类的影响，并且淡入淡出它的效果。

另外，当我删除“open”类时，.bottom-content's parents' 不会关闭。

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

【问题讨论】：

你能为此提供小提琴吗？

我尝试制作小提琴，但无法让 js 部分工作：S jsfiddle.net/xdasagey/1

【参考方案1】：

我不是 100% 清楚您要查找的内容，因此请告诉我是否已接近。我认为不需要 open 类，除非你真的想在 CSS 中完成这一切：

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;

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

【讨论】：

归因：这个答案大部分是基于***.com/a/40347674/1544886