CSS移行スタッキングですか？

Question

私はメニューをスライドさせるためにCSSを使用しています。 JSでは、CSSアニメーションをトリガーするクラスだけを追加します。デスクトップモードでは、リスト項目を含む4つの列のうちメニューが存在します。モバイルモードでは、メニューは折りたたまれ、見出しだけが残ります。見出しはクリック可能でメニューを開きます。

マイメニューは正常に動作していますが、スライディングダウンのアニメーションはスライドアップと異なります。スライディングアップも遅くなり、後で開始します。なぜこのようなことが起こっているのか分かりませんが、私は同じような効果が欲しいです。

参照してください私のJSfiddle：JSfiddle

HTML

<div class="site-footer"> 
    <div class="row"> 
     <div class="col-25p"> 
      <span class="footer-heading">Heading 1</span> 
      <div> 
       <ul> 
        <li><a href="#">Sub 1</a></li> 
        <li><a href="#">Sub 2</a></li> 
        <li><a href="#">Sub 3</a></li> 
        <li><a href="#">Sub 4</a></li> 
        <li><a href="#">Sub 5</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-25p"> 
      <span class="footer-heading">Heading 2</span> 
      <div> 
       <ul> 
        <li><a href="#">Sub 1</a></li> 
        <li><a href="#">Sub 2</a></li> 
        <li><a href="#">Sub 3</a></li> 
        <li><a href="#">Sub 4</a></li> 
        <li><a href="#">Sub 5</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-25p"> 
      <span class="footer-heading">Heading 3</span> 
      <div> 
       <ul> 
        <li><a href="#">Sub 1</a></li> 
        <li><a href="#">Sub 2</a></li> 
        <li><a href="#">Sub 3</a></li> 
        <li><a href="#">Sub 4</a></li> 
        <li><a href="#">Sub 5</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-25p"> 
      <span class="footer-heading">Heading 4</span> 
      <div> 
       <ul> 
        <li><a href="#">Sub 1</a></li> 
        <li><a href="#">Sub 2</a></li> 
        <li><a href="#">Sub 3</a></li> 
        <li><a href="#">Sub 4</a></li> 
        <li><a href="#">Sub 5</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

SCSS

.site-footer { 
font-size: 1.3rem; 

.footer-heading { 
    display: block; 
    color: black; 
    font-weight: bold; 
    font-size: 18px; 
    padding-top: 4px; 

    &:hover{ 
     cursor: pointer; 

     @media (min-width: 768px){ 
      cursor: default; 
     } 
    } 

    &::after { 
     font-family: "FontAwesome"; 
     float: right; 
     content: "\f078"; 
     transition-property: all; 
     transition-duration: 0.5s; 

     @media (min-width: 768px){ 
      content: ""; 
     } 
    } 

    &.open{ 
     &::after{ 
      transform: rotate(180deg); 
     } 

     & + div{ 
      max-height:500px; 
      //transition:all 500ms ease; 
      transition-property: all; 
      transition-duration: 1s; 
      transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94); 
     } 
    } 


    & + div { 
     overflow-y: hidden; 
     max-height: 0; 
     transition-property: all; 
     transition-duration: 1s; 
     transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94); 

     @media (min-width: 768px){ 
      max-height: 500px; 
     } 
    } 

} 

ul { 
    list-style: none; 
    padding-left: 0px; 

    li { 
     padding-top: 4px; 
     padding-bottom: 4px; 

     a { 
      color: black; 
      text-decoration: none; 

      &:hover { 
       text-decoration: underline; 

      } 
     } 
    } 
} 
} 


.col-25p{ 
    @media (min-width: 768px){ 
    float:left; 
    width: 25%; 
    } 
} 

はJavaScript

$('.site-footer .footer-heading').click(function(){ 
     $(this).toggleClass('open'); 
    }); 

Answer 1

max-heightプロパティをアニメートしています。これは0pxから500pxにアニメーション化されます。しかし、アニメーション化するdivは500pxより小さい。

閉じるアニメーションに遅延があるのはこのためです。

私が通常これを解決する方法は、JavaScriptを使用して要素のmax-heightプロパティを設定することです。 JSでそれに `：最大高さ：

Answer 2

& + div

transition:all 500ms ease; 
transition-duration: 1s; 
transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94); 

に設定してくださいあなたはJSとの高さを決定し、`スタイルを追加することを意味し、この

.site-footer { 
    font-size: 1.3rem; 

    .footer-heading { 
     display: block; 
     color: black; 
     font-weight: bold; 
     font-size: 18px; 
     padding-top: 4px; 

     &:hover{ 
      cursor: pointer; 

      @media (min-width: 768px){ 
       cursor: default; 
      } 
     } 

     &::after { 
      font-family: "FontAwesome"; 
      float: right; 
      content: "\f078"; 
      transition:all 500ms ease; 
      transition-duration: 1s; 
      transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94); 

      @media (min-width: 768px){ 
       content: ""; 
      } 
     } 

     &.open{ 
      &::after{ 
       transform: rotate(180deg); 
      } 

      & + div{ 
       max-height:500px; 
       transition:all 500ms ease; 
       transition-property: all; 
       transition-duration: 1s; 
       transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94); 
      } 
     } 


     & + div { 
      overflow-y: hidden; 
      max-height: 0; 
      transition-property: all 500ms ease; 
      transition-duration: 0.3s; 
      transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94); 

      @media (min-width: 768px){ 
       max-height: 500px; 
      } 
     } 

    } 

    ul { 
     list-style: none; 
     padding-left: 0px; 

     li { 
      padding-top: 4px; 
      padding-bottom: 4px; 

      a { 
       color: black; 
       text-decoration: none; 

       &:hover { 
        text-decoration: underline; 

       } 
      } 
     } 
    } 
} 


.col-25p{ 
    @media (min-width: 768px){ 
    float:left; 
    width: 25%; 
    } 
}