<button (click)="add()">点我</button>
<ul *ngIf="count" class="bbb">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>10</li>
</ul>
.bbb{
  width: 200px;
  max-height: 200px;
  background-color: red;
  transition:max-height 1.2s ease-in-out;
  overflow: auto;
  animation: hide-scroll 1s backwards;
}
@keyframes hide-scroll {
  from{
    max-height: 0;
    overflow:hidden;
  }
  to{
    max-height: 200px;
    overflow:hidden;
  }
}  
let t=document.querySelector('.bbb');
let s=true;
document.querySelector('button').addEventListener('click',()=>{
  if(s){
        t.style.display = 'none';	// 隐藏选择的元素
        s=false
  }else{
        t.style.display = 'block';
        s=true
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.