想要在从 angular 函数单击按钮时将过渡添加到 img src 更改

Question

我正在编写一个新的网络应用程序，它有四个宇宙飞船视图。用户可以单击 "front"、"side"、"top" 和 "Bottom" 的按钮 - 从 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 class 只是设置图像的大小。

网站在这里：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;
}

添加有条件地激活 class 并处理 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

想要在从 angular 函数单击按钮时将过渡添加到 img src 更改

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

html

javascript

css

angular

angular7