使用宽度计算动态设置 CSS 属性左侧 Angular 6

Question

我目前正在构建一个 CSS 音频播放器，我正在设置一个 div 的宽度，以使用如下所示的 [style] 来表示音频的当前进度，并且它有效太棒了：

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

我也想在上面进度div的最后画一个小圆圈，设置另一个class的'left'CSS属性 .这将是英文的：

(Parent Width px) - (Progress Width px)

我试过使用 calc() 函数，但它不喜欢它并且计算的百分比不知道使用我认为的宽度....

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

CSSclass是：

.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;
 }

有什么想法是最好的吗？我确定我可以找到一个 hacky 方法，但希望找到正确的方法

Answer 1

您可以使用 :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>

使用宽度计算动态设置 CSS 属性左侧 Angular 6

Dynamically setting CSS property left using width calculation Angular 6

css

ng-style

angular

angular6

使用宽度计算动态设置 CSS 属性 左侧 Angular 6

Dynamically setting CSS property left using width calculation Angular 6

css

ng-style

angular

angular6

使用宽度计算动态设置 CSS 属性左侧 Angular 6