Блог

Я делаю веб-приложение в Angular 11. У нас есть изображение, представляющее собой таблицу с 4 столбцами и простым значком под ней. Мы хотели бы переместить значок вправо на основе значения (числа), которое я получаю от серверной части (HTTP-вызов).

Изображение (690×450):

Значок (26×48):

HTTP-вызов возвращает число, равное 1, 2, 3 или 4, это номер столбца, в котором должен быть значок ниже.

Например, если серверная часть вернула число 3, результат должен быть:

Мне нужно найти способ передать это число стилям, чтобы инициировать переход слева направо. Поскольку изображение имеет фиксированную ширину (690×450), мы можем разделить его на 4 и каким-то образом получить расстояние, которое нам нужно применить к переходу.

Компонент:

 @Component({
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent {

  number$: Observable<number> = this.service.fetchNumber();

  constructor(
    private service: CalculatorService,
  ) {
  }

}
 

Шаблон:

   <div class="row justify-content-center">
    <div class="col-auto">
      <div class="band-container">
        <table class="table table-borderless">
          <tbody>
          <tr>
            <td class="p-0">
              <img src="assets/imgs/table.png" width="590" height="350"/>
            </td>
          </tr>
          <tr *ngIf="(number$ | async) as number">
            <td class="p-0">
              <img id="slide" src="assets/icons/hand.png" />
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
 

Стили:

 .band-container {
  width: 590px;
}

    #slide {
      position: absolute;
      width: 100px;
      height: 100px;
      -webkit-animation: slide 0.5s forwards;
      -webkit-animation-delay: 0.5s;
      animation: slide 0.5s forwards;
      animation-delay: 2s;
    }
    
    @-webkit-keyframes slide {
      100% { left: 0; }
    }
    
    @keyframes slide {
      100% { left: 0; }
    }
 

Я пытался переместить значок, но я не знаю на 100%, как это сделать правильно, кроме того, я не уверен, как передать число, полученное из серверной части, в стили и применить правильный расчет.

Моя цель — переместить значок руки слева направо в определенную позицию (под столбцом) на основе числа (номера столбца), которое я получаю от серверной части.

Вы можете использовать переменные CSS.

 #slide {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: slide 0.5s forwards;
  animation-delay: 2s;
}

@-webkit-keyframes slide {
  100% { var(--left); }
}

@keyframes slide {
  100% { var(--left); }
}
 

И передать его через HTML

  <div class="row justify-content-center">
    <div class="col-auto">
      <div class="band-container">
        <table class="table table-borderless">
          <tbody>
          <tr>
            <td class="p-0">
              <img src="assets/imgs/table.png" width="590" height="350"/>
            </td>
          </tr>
          <tr *ngIf="(number$ | async) as number">
            <td class="p-0">
              <img id="slide" style="--left: distance;" src="assets/icons/hand.png" />
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
 

Вот пример https://jsfiddle.net/204aubw6 /

Он не имеет полной поддержки для всех браузеров, но поскольку вы используете Angular 11, IE в любом случае не будет иметь значения https://caniuse.com/css-variables .