边框宽度的CSS过渡答案

【问题标题】：CSS transition of border-width边框宽度的CSS过渡
【发布时间】：2018-08-06 18:22:43
【问题描述】：

我有以下代码：

<div class="bordered" [ngStyle]="row.sticked ? {'border-left': '5px solid' + row.sticked } : null">

如果设置了row.sticked，则border-left 属性将分配给5px solid #SOME_COLOR。

.bordered 类被分配给相同的元素并定义如下：

.bordered {
  transition: border-left-width 0.1s linear;
}

转场效果很好，但是当row.sticked变成false并且去掉左边的边框，就没有转场了。（出现边框 -> 过渡有效，边框消失 -> 立即移除，无过渡）。

我尝试将border-left: 0 应用到同一个div（我猜测如果根本没有边框，则转换不起作用）但是从border-left：5px 到0 的转换仍然不起作用.

知道我在这里缺少什么吗？

【问题讨论】：

Angular 的 ngStyle 正在使用键：值对，因此您的三元条件应该类似于 [style.border-left]="row.sticked ? '5px solid' + row.sticked" 或 [ngStyle]="{'border-left': row.sticked ? '5px solid' + row.sticked}"
@standby954 谢谢！好多了。

标签： css angular css-animations

【解决方案1】：

ngStyle 是 keyValue 类型，所以我使用 row.sticked 来切换 border-left 样式的值

<div 
[ngStyle]="{'border-left': row.sticked ? ('20px solid '+row.sticked) : ('0px solid '+row.sticked) }"
class="bordered">

    border element

</div>

<button (click)="row.sticked = 'red' ">show</button>
<button (click)="row.sticked = '' ">hide</button>

对于 row.sticked，您可以将其用作标志 (true,false)，因此当您将其切换为 false 时，您不会看到黑色边框

stackblitz example

【讨论】：