CODEWITHSUNDEEP
htmlcssangular
RRGT19
RRGT19

Reputation: 1677

Animate image to move to the right to a specific position in Angular

I'm doing a web application in Angular 11. We have an image that is a table with 4 columns and a simple icon below it. We would like to move the icon to the right based on a value (number) that I receives from the backend (HTTP call).

Image (690x450):

H1 H2 H3 H4
1 2 3 4

Icon (26x48):

enter image description here

The HTTP call returns a number, which is 1, 2, 3 or 4, this is the number of the column where should be the icon below.

Example, if the backend returned the number 3, the result should be:

enter image description here

I need to find a way to pass this number to the styles to initiate the transition from left to right. Due to the image has a fixed width (690x450), we can divide it by 4 and somehow we get the distance that we need to apply to the transition.

Component:

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

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

  constructor(
    private service: CalculatorService,
  ) {
  }

}

Template:

  <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>

Styles:

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

I have tried to move the icon but I don't know 100% how to do it properly, also, I'm not sure how to pass the number received from the backend to the styles and apply the correct calculation.

My goal is to move the hand icon from left to right to a specific position (below a column), based on a number (column number) that I receives from the backend.

Upvotes: 0

Views: 1186

Answers (1)

Xuan-Hung Trinh
Xuan-Hung Trinh

Reputation: 301

You can use the CSS variables.

#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); }
}

And pass it via the 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>

Here's an example https://jsfiddle.net/204aubw6/

It doesn't have full support for all browsers, but since you are doing Angular 11, IE won't matter anyway https://caniuse.com/css-variables.

Upvotes: 1

Related Questions