<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
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.