Динамическая установка свойства CSS слева с использованием вычисления ширины Angular 6 - PullRequest
Новая
       13

Динамическая установка свойства CSS слева с использованием вычисления ширины Angular 6

0 голосов
/ 09 июня 2018

В настоящее время я создаю аудиоплеер CSS и задаю ширину div для отображения текущего прогресса звука, используя [стиль], как показано ниже, и он прекрасно работает: 

<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>

Я также хочу нарисовать маленький кружок в конце вышеприведенного div прогресса, установив свойство 'left' CSS другого класса.Это было бы по-английски: 

(Parent Width px) - (Progress Width px)

Я пытался использовать функцию calc (), но ей это не нравится, и рассчитанный процент не будет знать, как использовать ширину, я думаю ....

<div class="player-progress-handle" [style.left.px]="calc(100% - (currentTime * 100)/duration"></div>

Классы CSS: 

.player-progress-current {
    width: 100%;
    height: 1px;
    background-color: red;
}

.player-progress-handle {
    position: relative;
    bottom: 1px;
    border: 1px solid #f50;
    border-radius: 100%;
    height: 8px;
    width: 8px;
    background-color: #f50;
    box-sizing: border-box;
    margin-top: -4px;
    margin-left: -4px;
 }

Есть идеи, как сделать это наилучшим образом?Я уверен, что могу найти хакерский путь, но хотел бы найти правильный путь

1 Ответ

0 голосов
/ 09 июня 2018

Вы можете использовать :after для своей ручки и избавиться от расчетов: 

.player-progress-current {
  position: relative;
  width: 50%;
  height: 1px;
  margin: 20px 0;
  background: red;
}

.player-progress-current:after {
  content: '';
  position: absolute;
  right:-3px; bottom: 1px;
  border: 1px solid #f50;
  border-radius: 55%;
  height: 8px;
  width: 8px;
  background-color: #f50;
  box-sizing: border-box;
}
<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>
...