子セクションを表示しているときに親divの遷移で展開する

Question

私は、その中にフォームを持つコンテナdivを持ち、デフォルトでは送信ボタンは非表示になっています。 welcomeSettingsIconボタンをクリックすると、送信ボタンが消えてしまい、親divが自分自身を拡張します。この拡張は、表示/非表示のようなスナップのようなものです。私が望むのは、移行ボタンをフェードインする直前に、親divがサブミットボタンのスペースのためのトランジションで自分自身を拡張するようにトランジションを追加することです。

私が使用したアプローチはfrom this answerでした。しかし、私のコードに適用すると、親divは拡張中に遷移を取得しません。また、サブミット・ボタンが初めてフェードインした後、divは新しい位置にスナップし、閉じると再び開くと、ボタンの高さはopenクラスの影響を受け、その効果は緩やかになります。

また、 '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％明確ではありませんよだから私に教えてくださいこれが近い場合。

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>