当Angular 8中存在文本溢出时，动画滚动文本

Question

我正在开发一个 Angular 8 应用程序，并希望在出现此类情况时处理文本溢出。所以我要做的是让文本从右到左滚动，只有当有任何不适合屏幕的隐藏文本时。如果文本适合，我不想对其进行动画处理。我认为这是您可以使用 Jquery 等轻松完成的事情，但由于我在 Angular 8 中工作，我需要一个纯 css 解决方案或一个打字稿解决方案。我将在下面附上一个链接，您可以在其中看到我此时的位置。现在我只是在悬停时为所有内容设置动画。所以在我的示例中，我只想为第一段设置动画，而不是第二段。

https://stackblitz.com/edit/angular-inifat

Answer 1

我希望这是你所期望的，让我们尝试和评论。

app.component.css

.text { 
  overflow: hidden;
}
p {
  text-align: center;
  white-space: pre;
  transition: 30s;
} 

app.component.html

<div class="text"  #parentTag (mouseenter)="move()" (mouseleave)="stop()">
  <p #target  >This is some long long super long, extremly long text right here This is some long long super long, extremly long text right hereThis is some long long super long, extremly long text right here This is some long long super long, extremly long text right here This is some long long super long, extremly long text right here This is some long long super long, extremly long text right here This is some long long super long, extremly long text right here
</p>
<div> 

app.component.ts

import { Component, ElementRef,Renderer, ViewChild, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  left = 0;
  @ViewChild('parentTag', {static: false})
  parentTag: ElementRef; 

  @ViewChild('target', {static: false})
  target: ElementRef;

  constructor(private el:ElementRef, private renderer: Renderer2){

  } 

  move(){
    console.log(this.parentTag.nativeElement.clientWidth); 
    console.log(this.target.nativeElement.scrollWidth);
    let left = this.target.nativeElement.scrollWidth - 
    this.parentTag.nativeElement.clientWidth; 
    this.renderer.setStyle(this.target.nativeElement, 'margin-left', '-'+left+'px');
  }

  stop(){
    this.renderer.setStyle(this.target.nativeElement, 'margin-left', '0px');
  }

}