gpt4 book ai didi

html - 边框 css 变化比变换旋转更快

转载 作者:行者123 更新时间:2023-11-28 01:49:58 25 4
gpt4 key购买 nike

Angular Material 有这个 mat-expansion-panel,我想在 mat-expansion-panel-header 下放置一个底部边框。

底部边框不应该是全宽的,这就是为什么我在 mat-expansion-panel-header span 下改变了它的位置。

问题是有 2 个跨度,一个是 mat-title,另一个是 mat-indicator,它是向上或向下的箭头,具体取决于 mat-expansion 是否展开。问题出现在轮换上。在 safari 上,它可以毫无问题地旋转,但在 chrome 中,当边框设置到顶部并从底部移除时会有轻微的延迟,因为当箭头旋转时,一切都是颠倒的。

mat-indicator 有内置的“style='transform: rotate(0deg)'”或“style='transform: rotate(180deg)'”

  • TL:DR 主要问题 -是否有一些 css 技巧可以检测旋转的值是 0 还是 180?出于某种原因,无论是向上还是向下,指标的类别都是相同的。

最佳答案

更新:

好吧,我希望这会有所帮助...实际上并不是您问题的解决方案...只是获得相同视觉效果的另一种方法...:https://stackblitz.com/edit/angular-material-4pcnph?file=app/app.component.css

原答案:

(回答你的 tldr 问题)

mat-expansion-panel 展开时,它有一个类 mat-expanded

所以你可以用它来编写你的CSS:

.mat-expansion-indicator::after{ /* when its 0deg */
color: blue; /* whatever */
}

.mat-expanded .mat-expansion-indicator::after{ /* when its 180deg */
color: red; /* whatever */
}

演示:https://stackblitz.com/edit/angular-tcy7fh?file=styles.css

关于html - 边框 css 变化比变换旋转更快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49999743/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com