如何在角度组件/类型脚本中使用徽标滑块JavaScript函数？_Javascript_Html_Angular_Typescript

如何在角度组件/类型脚本中使用徽标滑块JavaScript函数？

javascript html angular typescript

如何在角度组件/类型脚本中使用徽标滑块JavaScript函数？,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,因为我是新手，所以我需要你的帮助。我看了很多教程，尝试了很多东西，但这次我需要将JavaScript函数合并到我的Angular组件中这是我想在Angular内部使用的实际滑块（多亏了SomoKRoceS）： document.getElementsByTagName（“body”）[0]。onload=createAnimation；函数createAnimation（）{ 让e=document.getElementById（“徽标库”）；//获取元素 var style=docume

因为我是新手，所以我需要你的帮助。我看了很多教程，尝试了很多东西，但这次我需要将JavaScript函数合并到我的Angular组件中

这是我想在Angular内部使用的实际滑块（多亏了SomoKRoceS）：

document.getElementsByTagName（“body”）[0]。onload=createAnimation；
函数createAnimation（）{
让e=document.getElementById（“徽标库”）；//获取元素
var style=document.createElement（'style'）；//创建样式元素
style.type='text/css'；//追加一个css类型
//现在创建动态关键帧（取决于徽标库最终宽度）
//请注意，e的宽度在100%时给定给translateX
让关键帧为空\
@关键帧向左滚动{\
0% {\
变换：translateX（0）\
}\
100% {\
转换：translateX（-'+e.scrollWidth+'px）\
}\
}';
style.innerHTML=关键帧；//将样式元素的innerHTML设置为关键帧
document.getElementsByTagName（'head'）[0].appendChild（style）；//将元素作为样式表附加到文档的头部
e、 setAttribute（“样式”，“动画：向左滚动20s线性无限；动画迭代次数：无限；”；//为元素指定动画属性。
}

#徽标库包装{
溢出：隐藏；
位置：相对位置；
}
#标识库{
保证金：0；
填充：0；
位置：相对位置；
列表样式类型：无；
显示器：flex；
}
#徽标库。徽标库图{
保证金：0；
填充：0.1.6rem；
溢出：隐藏；
}
#徽标库。徽标库图img{
高度：自动；
最大高度：50px；
位置：相对位置；
过滤器：灰度（1）；
过渡：全部。4s；
}
#徽标库。徽标库图img:悬停{
过滤器：灰度（0）；
}

您可以将js函数放入组件中

但我通常不会选择使用函数作为我选择在组件css中放置一个css的方式

并为css提供动画

#logo-gallery {
  animation: scroll-left 20s linear infinite; 
  animation-iteration-count: infinite;
}

和维克希尔德

 @ViewChild('logoGallery', {static: false}) logoGallery: ElementRef;
    
      ngAfterViewInit(): void {
        let element=this.logoGallery.nativeElement;  
        element.style.setProperty('--m',element.scrollWidth+"px");
      }

您可以将js函数放在组件中

但我通常不会选择使用函数作为我选择在组件css中放置一个css的方式

并为css提供动画

#logo-gallery {
  animation: scroll-left 20s linear infinite; 
  animation-iteration-count: infinite;
}

和维克希尔德

 @ViewChild('logoGallery', {static: false}) logoGallery: ElementRef;
    
      ngAfterViewInit(): void {
        let element=this.logoGallery.nativeElement;  
        element.style.setProperty('--m',element.scrollWidth+"px");
      }

另一种方法是使用角度动画。唯一需要考虑的是使用

@ViewChildren

获取“htmlElement”。如果我可以使用*ngFor，我不喜欢写几个，所以我使用数组，用数组写一个li和另一个li。有些人喜欢

有些人喜欢

<div #wrapper id="logo-gallery-wrapper">
    <ul #banner id="logo-gallery"  >
    <li #logo>
            <figure class="logo-gallery-figure">
                <img (load)="resize()" src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
        </li>
        <li *ngFor="let i of items;let first=first">
            <figure class="logo-gallery-figure">
                <img  src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
        </li>
    </ul>
</div>

你可以看到，小心！如果更改代码，则需要刷新.html以在更改之前执行动画-否则会使导航器崩溃-

另外一个优点是，可以使用mouseover和mouseout暂停/启动动画

<ul (mouseover)="player.pause()" 
    (mouseout)="player.play()" 
   #banner id="logo-gallery"  >
...
</ul>

（*）为了检查是否一切正常，我们可以将.css样式更改为溢出：滚动，并输入这行代码，以确保“副本”和“inc”计算正确

像往常一样，随着变化而变化的是

更新和。。。标志的宽度有什么不同

在这种情况下，我们将更改.html。我们用logo和repeat做了一个循环

<div #wrapper id="logo-gallery-wrapper">
    <ul (mouseover)="player.pause()" (mouseout)="player.play()" #banner id="logo-gallery">
        <li *ngFor="let logo of logos" #logo>
            <figure class="logo-gallery-figure">
                <img (load)="loaded()" [src]="logo.url">
      </figure>
        </li>
        <ng-container *ngFor="let i of repeat">
                <li *ngFor="let logo of logos">
                    <figure class="logo-gallery-figure">
                        <img  [src]="logo.url">
          </figure>
                </li>
        </ng-container>
    </ul>
</div>

现在，刚刚更新了函数createAnimation，使用totalogoWidth代替this.logos.length*this.logoWidth

  createAnimation() {
    if (this.wrapper && this.logo) {
      const totalWidth = this.wrapper.nativeElement.getBoundingClientRect()
        .width;
      //in this case "copies" is simply Math.floor +1
      let copies =Math.floor(totalWidth / (this.totalLogoWidth)) + 1;
      this.repeat = ".".repeat(copies).split("");
      const inc = this.totalLogoWidth;
      const time = 9.2 * inc + "ms";
      const myAnimation: AnimationFactory = this.builder.build([
        style({ transform: `translateX(0px)` }),
        animate(time, style({ transform: `translateX(${-inc}px)` }))
      ]);
      this.player = myAnimation.create(this.banner.nativeElement);
      this.player.onDone(() => {
        this.createAnimation();
      });
      this.player.play();
    }
  }