如何解决动态更新div高度
我正在尝试制作手风琴。因此,当我单击标题时,下面的底部/文本将出现过渡。不幸的是,过渡无法用于height: auto
,如果我放置max-height
,过渡通常会很奇怪,这取决于容器的真实大小。
我曾经尝试过使用这种JS:
<article [ngClass]="accordionOne ? 'is-active' : ''">
<h3 (click)="accordionOne=!accordionOne">Accordion One</h3>
<p #accordionOneText [ngStyle]="accordionOneText ? {'max-height.px': accordionOneText.offsetHeight} : {'max-height.px': 0}">
Lorem ipsum...
</p>
</article>
像这样的CSS:
article {
&.is-active {
p {
transition: all 0.2s ease-in;
overflow: visible;
opacity: 1;
}
}
p {
opacity: 0;
transition: all 0.2s ease-in;
overflow: hidden;
}
}
但是,当我执行此操作时,如果窗口或某些内容发生更改,offsetHeight
不会重新计算,即它没有响应。如何解决这个问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。