Анимированная прокрутка текста при переполнении текста в Angular 8 - PullRequest
Новая
       40

Анимированная прокрутка текста при переполнении текста в Angular 8

0 голосов
/ 07 ноября 2019

Я работаю над приложением Angular 8 и хочу обработать переполнение текста, когда оно есть. Поэтому я пытаюсь сделать прокрутку текста справа налево только тогда, когда есть какой-либо скрытый текст, который не помещается на экране. Если текст подходит, я не хочу его оживлять. Я предполагаю, что это то, что вы легко можете сделать с помощью Jquery и т. Д., Но так как я работаю в Angular 8, мне нужно чистое решение CSS или решение для машинописного текста. Я приложу ссылку ниже, где вы можете увидеть, где я на данный момент. Сейчас я просто оживляю все вокруг. Поэтому в моем примере я хочу анимировать только первый абзац, а не второй.

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

1 Ответ

0 голосов
/ 07 ноября 2019

Я надеюсь, что это то, что вы ожидаете, давайте попробуем и прокомментируем.

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

}
...