Want to add transition to img src change on button click from angular function

Question

I have a new web app i'm writing and it has four views of a spaceship. The user can click on buttons for "front", "side", "top" and "Bottom" - created from the ship/Viewpoints[] array - and the app changes the value of srcView bound to [src].

In home.component.html

   <div class="row">
    <div class="col-8">
      <img *ngIf="srcView!=''" [src]="srcView" class="ship-view-box" />
    </div>
    <div class="col-4">
      <table>
        <thead>
          <tr><th>VIEW</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span *ngFor="let vp of ship.Viewpoints; let g = index" [className]="selectedView==vp.View ? 'viewangle isActive' : 'viewangle isInactive'" (click)="selectView(vp.View)">{{vp.View | titlecase}}</span>
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>

In home.component.ts:

 selectView(vw) {

    this.selectedView = vw;
    this.srcView = "../../assets/ships/" + this.ship.ShipKeyword + "/" + vw + ".png";

  }

What I want to do is have the view transition when the button is clicked.

I've spent days searching and all examples seem to be CSS with two overlayed images triggered by :hover. Not suitable in this case, as I've only got one image.

Ideally, the "selectView" function would hide the existing image, change the SRC then have it transition back to visible.

The ship-view-box class just sets the size of the image.

The website is here: http://codex.elite-dangerous-blog.co.uk FYI.

yurzui · Accepted Answer · 2019-02-11 11:06:59Z

1

You can leverage opacity css property with transitionend event.

Ng-run Example

Define css for your image like:

.ship-view-box {
  ...
  transition: opacity .5s linear;
  opacity: 0;
}


.ship-view-box--active {
  opacity: 1;
}

add add conditionally active class and handle transitionend event:

<img *ngIf="srcView" 
  [src]="srcView"
  class="ship-view-box"
  [class.ship-view-box--active]="active"
  (transitionend)="onTransitionEnd()"/>

ts

selectedView: string;

srcView: string;

active: boolean = true;

...


selectView(vw) {
  this.selectedView = vw;
  this.active = false;
}

onTransitionEnd() {
    this.srcView = "http://codex.elite-dangerous-blog.co.uk/assets/ships/sidewinder/" +
      this.selectedView + ".png";
    this.active = true;
}

Ng-run Example

answered Feb 11, 2019 at 11:06

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anthony Hunt Over a year ago

That was perfect. Worked exactly as I wanted. The change will go live tonight.

Collectives™ on Stack Overflow

Want to add transition to img src change on button click from angular function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related