Question

我有一个容器div，里面有一个表单，默认情况下隐藏提交按钮。单击welcomeSettingsIcon按钮，我在提交按钮淡入，父div扩展自己。这种延伸就像是表演/隐藏的快照。我想要的是添加一个转换，以便在提交按钮的淡入开始之前，父div通过转换提交按钮的空间来扩展自己。

我使用的方法是from this answer。但是，当我将它应用于我的代码时，父div在扩展时不会获得转换。此外，在提交按钮第一次淡入之后，div会捕捉到新的位置，当我再次关闭并打开时，按钮的高度会受到open类的影响而fadeIn会失去其效果。

此外，当我删除课程'打开'时，.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中完成所有这些：

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>

显示子节时，在父div上进行转换时展开

1 个答案: