代码之家 › 专栏 › 技术社区 › Niko

边框css更改速度快于变换旋转

transform angular-material rotation css html

Niko · 技术社区 · 6 年前

Angular material有这个mat扩展面板,我想在mat扩展面板标题下放置一个底部边框。

底部边框不应该是全宽的,这就是为什么我改变了它在垫子扩展面板标题跨距下的位置。

问题是有两个跨距,一个是mat title,另一个是mat indicator,它是一个向上或向下的箭头,具体取决于mat expansion是否展开。旋转时出现问题。在safari上,它的旋转没有问题,但使用chrome,当边框设置为顶部并从底部移除时会有一点延迟,因为当箭头旋转时,一切都是颠倒的。

mat指示器具有内置的“style='transform:rotate(0deg)”或“style='transform:rotate(180deg)”

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

1 回复 | 直到 6 年前

Devansh J 6 年前

更新时间:

嗯,我希望这有帮助。。。实际上并不是你问题的解决方案。。。只是另一种获得相同视觉效果的方法…: 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

推荐文章

Niko · 边框css更改速度快于变换旋转

6 年前

NOOBAF · 将数组传递给函数(C)

6 年前

Axel M · WPF自动旋转无极边界线ArgRadientBrush顺时针旋转,不旋转其余部分

6 年前

Mevia · 画布水平旋转img

6 年前

ThePurpleArcher · 统一if语句中四元数和eulerAngles的问题

6 年前

Nikolay Baranenko · Kafka循环垃圾收集日志

6 年前

E. Huckabee · SceneKit:使用平移手势将相机朝其面对的方向移动

6 年前

Thomas Schütt · javafx-如何将偏航、俯仰和滚动增量(而不是euler)应用于节点旋转轴,而不是场景旋转轴?

6 年前

Vinayak B · 确定片段重新启动是由于屏幕旋转还是浏览页面滑动?

6 年前

user9187461 · 管线旋转30度

6 年前