Question

我有以下代码：

<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仍然无法正常工作。

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

Answer 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

边框宽度的CSS过渡

1 个答案: