最大高さのアニメーション、他の要素の遅れ

Question

ulの最大高さを拡大しようとしています。 MAX-heightプロパティは、クラスを切り替えることにより、（変更された場合、高さが直ちに変化し、それらが必要としてul下の要素はアニメーションの高さを尊重する。

var expander = $('.skill-expand'); 
 
var skillsUl = $('.skills-list'); 
 
expander.on('click', function() { 
 
    skillsUl.toggleClass('unexpanded'); 
 
    if (skillsUl.hasClass('unexpanded')) { 
 
    expander.html('<span class="fa fa-chevron-down">..\/..</span>'); 
 
    } else { 
 
    expander.html('<span class="fa fa-chevron-up">../\..</span>'); 
 
    } 
 
    return false; 
 
});

.skills-list { 
 
    margin: 0; 
 
    padding: 0; 
 
    transition: max-height 1s ease-in-out; 
 
    max-height: 800px; 
 
    /*effectively auto*/ 
 
} 
 

 
.skill-expand { 
 
    margin: auto; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
.skills-list.unexpanded { 
 
    max-height: 60px; 
 
    overflow: hidden; 
 
    transition: max-height 1s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="skills-list unexpanded"> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
</ul> 
 

 
<a href="#" class="skill-expand"><span class="fa fa-chevron-up">..\/..</span></a>

https://jsfiddle.net/ubgmshzo/

..\/..エキスパンダーテキストをクリックすると、エキスパンダー要素が下に移動する間に遅れがあることがわかります。理由はありますか？

Answer 1

：

ここフィドル更新

。

var expander = $('.skill-expand'); 
 
var skillsUl = $('.skills-list'); 
 

 
expander.on('click', function() { 
 
    skillsUl.toggleClass('unexpanded', 1000).promise().done(function() { 
 
    if (skillsUl.hasClass('unexpanded')) { 
 
     expander.find('span').removeClass('fa-chevron-down'); 
 
     expander.find('span').addClass('fa-chevron-up'); 
 
    } else { 
 
     expander.find('span').removeClass('fa-chevron-up'); 
 
     expander.find('span').addClass('fa-chevron-down'); 
 
    } 
 
    }); 
 

 
    return false; 
 
});

.skills-list { 
 
    margin: 0; 
 
    padding: 0; 
 
    max-height: 800px; 
 
    /*effectively auto*/ 
 
} 
 

 
.skill-expand { 
 
    margin: auto; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
.skills-list.unexpanded { 
 
    max-height: 60px; 
 
    overflow: hidden; 
 
} 
 

 
.fa-chevron-up:before { 
 
    content: "..\\/.."; 
 
} 
 

 
.fa-chevron-down:before { 
 
    content: "../\\.."; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<ul class="skills-list unexpanded"> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
</ul> 
 

 
<a href="#" class="skill-expand"><span class="fa fa-chevron-up"></span></a>

私はまた、代わりにHTMLを上書きするのが容易トグルのCSSにspanfa-chevron-upとfa-chevron-downを動かしました。

Answer 2

ulからクラス.unexpandedを削除し、アイコンをクリックするとこれを追加する必要があります。あなたがdurationを指定することができますjQueryのUI toggleClassを使用してpromiseトリガーにアップ/ダウンシェブロンのスイッチを使用してhttps://jsfiddle.net/ubgmshzo/1/

var expander=$('.skill-expand'); 
 
var skillsUl = $('.skills-list'); 
 
expander.on('click', function() { 
 
      skillsUl.toggleClass('unexpanded'); 
 
      if (skillsUl.hasClass('unexpanded')) { 
 
       expander.html('<span class="fa fa-chevron-down">..\/..</span>'); 
 
      } else { 
 
       expander.html('<span class="fa fa-chevron-up">../\..</span>'); 
 
      } 
 
      return false; 
 
     });

.skills-list { 
 
margin: 0; 
 
padding: 0; 
 
transition: all 1s ease-in-out; 
 
max-height: 60px;/*effectively auto*/ 
 
overflow: hidden; 
 
} 
 

 

 
.skill-expand { 
 
margin: auto; 
 
text-align: center; 
 
display: block; 
 
transition: all 1s ease-in-out; 
 
} 
 

 

 
.unexpanded { 
 
max-height: 800px; 
 
overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="skills-list"> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
    <li class="skill-rating">Developers developers</li> 
 
</ul> 
 

 
<a href="#" class="skill-expand"><span class="fa fa-chevron-up">..\/..</span></a>