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

Question

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

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> 

应用程序组件.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');
}
}