想要在角度功能的按钮单击上添加过渡到img src更改

Question

我正在编写一个新的Web应用程序，它有一个太空飞船的四个视图。用户可以单击“前面”，“侧面”，“顶部”和“底部”的按钮-从ship / Viewpoints []数组创建-应用程序将srcView的值更改为[src]。

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

在home.component.ts中：

 selectView(vw) {

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

  }

我想做的是单击按钮时进行视图转换。

我花了几天的时间进行搜索，所有示例似乎都是CSS，其中两个图像由：hover触发。在这种情况下不合适，因为我只有一张图像。

理想情况下，“ selectView”功能将隐藏现有图像，更改SRC，然后将其过渡回可见状态。

ship-view-box类仅设置图像的大小。

网站在这里：http://codex.elite-dangerous-blog.co.uk仅供参考。

Answer 1

您可以通过transitionend事件来利用不透明度css属性。

Ng-run Example

为图像定义CSS，例如：

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


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

add添加有条件的活动类并处理transitionend事件：

<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