时间戳

首页 > 解决方案 > 在Angular 7中加载后淡入淡出背景图像

angular - 在Angular 7中加载后淡入淡出背景图像

问题描述

我发布这个是因为我还没有找到一个很好的资源，只有在加载后才能淡入背景图像。使用 jQuery，我在加载了以下代码后淡入背景图像：

    $('.img-col').each(function () {
     var $wrapper = $(this);
     var $img = $wrapper.find('.image');
     var tempImg = new Image();
     tempImg.src = $img.data('src');
     tempImg.onload = function () {
      $img.css('background-image', 'url(' + tempImg.src + ')');
      $wrapper.addClass('loaded');
     };
    })

以下是到目前为止我在 Angular 7 中的内容。它似乎可以工作，但我知道代码不正确。在 html 中对 class 的双重引用是必要的，但显然不正确。

组件.ts：

export class AppComponent implements OnInit{
 title = 'test-app';
 imageSrc: any;
 invisible: any;
 ngOnInit(){
  this.imageSrc = "https://www.producemarketguide.com/sites/default/files/valencia-oranges_variety-page.png";
 }
 onImageLoad(){
  this.invisible = "visible";
 }
}

组件.html：

<img [ngClass]="invisible" class="invisible" [src]="this.imageSrc" (load)="onImageLoad()" />

组件.css：

.invisible{opacity:0}
.visible{opacity:1; transition: opacity 1.6s ease;}

StackBlitz 代码

编写此代码的正确方法是什么，或者只有在 Angular 7 完全加载后才能让背景图像淡入的更好方法？

标签： angular

解决方案

看起来你可以在这里使用角度动画，我第一次尝试过，所以不要过多评价我，在stackblitz的这个例子中查看app.component.ts、app.component.html和app.component.css . 我已经改变了一点。希望有帮助。

推荐阅读