时间戳

首页 > 解决方案 > 当Angular 8中存在文本溢出时动画滚动文本

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

问题描述

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

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

标签： cssangularanimationcss-animationsoverflow

解决方案

我希望这是您所期望的，让我们尝试发表评论。

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');
  }

}

推荐阅读