CSS переход ширины границы
У меня такой код:
<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 все еще не работает.
Есть идеи, что мне здесь не хватает?
@ standby954 Спасибо! Намного лучше.
Ответы 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>
for
row.stickedyou may use it as flag (true,false) so when you toggle it to false you don't get a black border
Angular ngStyle работает с парой ключ: значение, поэтому ваше тернарное условие должно выглядеть либо как
[style.border-left] = "row.sticked ? '5px solid' + row.sticked", либо как[ngStyle] = "{'border-left': row.sticked ? '5px solid' + row.sticked}".