CODEWITHSUNDEEP
javascripthtmlcssangularangular7
Anthony Hunt
Anthony Hunt

Reputation: 115

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

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.

Upvotes: 1

Views: 1156

Answers (1)

yurzui
yurzui

Reputation: 214077

You can leverage opacity css property with transitionend event.

Ng-run Example

enter image description here

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

Upvotes: 1

Related Questions