手风琴中的滑动动画卡顿

Question

我有一个带标签的手风琴菜单。当您点击选项卡时，信息会显示在其中一个选项卡的下方，通过平滑地上下滑动。

问题是在 slideUp 和 slideDown 期间动画中存在卡顿。我也尝试了 animate 并调整了一些 css，但我无法弄清楚。

如果有帮助，这里是 fiddle。

HTML:

 <div class="project-container">


 These don't slide well:
     <ul class="project-nav">
  <li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
    <section class="is-open">
    <p id="current-project-title">TITLE</p>
    <p>TEXT HERE</p>
    </section>
  </li>
  <li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
    <section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </section>
  </li>
        </ul>
        </div>

<br>
But this slides VERY well:
<br>
             <button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
             <section class="info-container">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>

Javascript:

$(document).ready(function() {
    var Tabs = {

  el: {
    nav: $(".project-nav"),
    tabs: $(".project-nav > .project-tab > a"),
    panels: $(".project-nav > .project-tab > section"),
  },

  init: function() {
    Tabs.bindUIActions();
  },
  bindUIActions: function() {
    Tabs.el.nav
      .on(
        'click', 
        '.project-tab > a:not(.active)', 
        function(event) {
          Tabs.deactivateAll();
          Tabs.activateTab(event);
          event.preventDefault();
        }
      );
  },

  deactivateAll: function() {
    Tabs.el.tabs.removeClass("active");
    Tabs.el.panels.removeClass("is-open").slideUp('slow');
  },
  activateTab: function(event) {
    $(event.target)
      .addClass("active")
      .next()
      .addClass("is-open").slideDown('slow');
  }
};

Tabs.init();   




////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');



////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
    $('.info-container').slideToggle('slow');
    $("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});

Answer 1

这是你的问题

.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

你给幻灯片元素添加了过渡css，它使幻灯片效果不能正常工作，你必须删除它

你可以试试这个jsfiddle

Answer 2

我能够使用 CSS 而不是 jquery 来达到预期的效果。我使用 max-height 转换使选项卡平滑地向上滑动和向下滑动。

这是更新后的 fiddle.

这是新的 CSS：

///// RESPONSIVE ACCORDION TO TABS


.project-container {
    display: block;
}

.project-nav {
  list-style: none;
  position: relative;
}

.project-nav a:active{
    opacity:1;
}

.project-nav .project-tab { 
    display: inline; 
  } 

.project-nav > .project-tab > a {
  display: inline-block;
  padding: 10px 15px;
  background-color: #00A88C;
  border: solid 1px #00A88C;
  border-radius: 0px 10px;
  text-decoration: none;
  color: #fff;
  width:40%;
  font-size: 30pt;
  clear: both;
  text-align: center;
}

#project-tab-1 {
    margin-right: 2%;
    margin-left: 7%;
}

#project-tab-2 {
    margin-left: 2%;
}

#project-tab-link:hover { 
    background-color: #13ebc7;
    border-color: #13ebc7;
} 

#project-tab-link.active {
    color: #00A88C!important;
  background-color: rgba(19, 235, 199, 0)!important;
}

#project-tab-link.active:hover {
   border-color: #00A88C;
}

.project-nav section {
  position: absolute;
  top: -9999px;
  left: -9999px;
  float: left;
  color:#5c5c5c;
  overflow: hidden; 
  border: solid 1px #00A88C;
  width:100%;
  margin-top:10px;
  padding-bottom: 15px;
  opacity: 0;
}

.project-nav section.is-open {
  position: static;
  opacity: 100;
}

.project-tab section p {
    font-family:'century gothic';
    padding: 0px 30px;
}

.project-tab section p:empty {
  display: none;
}

#current-project-title{
  font-size: 16pt;
}

#current-project-link {
  float: right;
    padding: 5px;
    background: #00A88C;
    color:#fff;
    margin-right: 30px;
    width: auto;
}

#current-project-link:hover {
     background: #13ebc7;
}

.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}


@media only screen and (max-width: 730px) {
    #front-page-textbox{
        background: #0f2347;
        color: #fff;
    }
.project-container {
        margin-bottom: 10px;
    }

  .project-nav .project-tab a {
    display: block;
    width:100%;
    border-radius: 0px;
  }

    #project-tab-1, #project-tab-2 {
        margin-left: 0;
        margin-right: 0;
}

    .project-nav .project-tab a.active {
    border: solid 1px #13ebc7; 
    }

  .project-nav section {
    margin:0;
      position: relative;
  top: auto;
  left: auto;
  float: none;
  max-height:0;
  padding-bottom: 0px;
  opacity: 100;
  }

.project-nav section.is-open {
    border-radius: 0px;
    border-top: none;
    max-height: 1200px;
}
    .project-tab > a:after {
        font-family: 'Glyphicons Halflings';
        content: "\e080"; 
        float: right;
        font-size: 20pt;
        margin-top: 10px;
    }
    .project-tab > a.active:after{
        font-family: 'Glyphicons Halflings';
        content: "\e114";
        float:right;
        font-size: 20pt;
        margin-top: 10px;
    }



/// TOGGLE BUTTON

.toggle-info {
    display: block;
    width: 100%;
    color: #f5f5f5;
    padding: 10px 15px;
    background-color: #00A88C;
    font-size: 30pt;
}

.toggle-info i{
    font-size: 10pt;
    margin-top: 10px;
    float: right;
    display: block;
}

.toggle-info:hover {
     background-color: #13ebc7;
}

.toggle-info, .toggle-info:hover {
        -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.info-container{
     padding: 10px 15px;
border: solid 1px #00A88C;
}

手风琴中的滑动动画卡顿

Sliding Animation Stutters in Accordion

javascript

jquery

animation

accordion

slide