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并返回。然而，动画divs小于500px。

这就是为什么延迟关闭动画。

我通常解决这个问题的方法是通过使用JavaScript在元素上设置max-height属性。

Answer 2

请& + div

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

设置请试试这个

.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%; 
    } 
}