javascript - 使用 animate、addClass 和 RemoveClass 更改 div 大小

Question

这是我的第一个问题，如果我不够具体或者我做错了什么，请随时告诉我! 我想要一个jquery方法，它将所有具有“passive”类的div更改为高度500px和passive-->active，所以会有另一种方法将高度更改回100px。前半部分工作正常，我改变了类(class)，但第二个动画不会发生。我在 html 中所拥有的只是一个带有被动类的 div。

$("document").ready(function(){

$(function() { 

$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");    
});    


$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});   

});
});` 

Answer 1

jQuery.animate() 成本高昂且不稳定。只需切换类并使用 CSS 进行过渡即可获得更平滑的过渡

.passive {  
  height:100px; 
  transition:height 1s;
}
.active { 
  height:300px;
}

Array
  .from(document.querySelectorAll('.passive'))
  .forEach(
    e => e.addEventListener(
           'click', 
           evnt => e.classList.toggle('active')  
    )
)

.container { display:flex; }
.container>div { 
  flex:1 auto;
}

.passive { 
  background-color:red; 
  margin:5px; 
  height:100px; 
  width:20px; 
  transition:height 1s;
}
.active { 
  height:300px;
}

<div class="container">
  <div class="passive" tabindex=1></div>
  <div class="passive" tabindex=2></div>
  <div class="passive" tabindex=3></div>
</div>