附加文字

Question

只需要一些Angular和Animation的帮助。我想滚动一些文本，这些文本在一个区域中从下到上逐行动态展开，并带有平滑的动画。

我发现了一些css动画代码。这里有一个plunkr：css animation

我做了一些Angular App的演示。在应用程序中有一些文本区域，单击开始按钮后，每500ms附加一些示例文本。

我在文本区域添加了ScrollGlue指令，可自动将文本滚动到底线。

在plunkr中制作了一些演示：demoscroll

所以问题是，如何在上面的plunkr中为文本添加一些平滑的滚动？

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {ScrollGlueDirective} from './scrollGlue.directive';

@NgModule({    
  declarations: [
    DemoScrollComponent,
    ScrollGlueDirective
  ],
  imports: [
    BrowserModule,

  ],
  providers: [
  ],
  bootstrap: [DemoScrollComponent,]
})


export class AppModule { }

demoscroll.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      {{line}}
      <div class="demo-scroll-area" scrollGlue>
        <ul>
          <li *ngFor="let item of content">
            <p>{{ item }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <button (click)="startTextScroll()">Start</button>
      <button (click)="stopTextScroll()">Stop</button>
    </div>
  `,
  styles: [`.demo-scroll-area {
    width: 100%;
    height: 400px;
    overflow-y: hidden;
  }
  li {
    list-style-type: none;
  }

  li:hover {
    background: rgb(182, 150, 136);
  }
  `]
})
export class DemoScrollComponent {
  content: any = [];
  line: string = 'Aliquam consequatur dolore earum et eum in';
  lineCounter: number = 0;

  interval: any;

  constructor() {

  }

  startTextScroll() {
    console.log('startTextScroll()');

    this.interval = setInterval(() => {
      this.addTextLine();
    }, 500);
  }

  stopTextScroll() {
    clearInterval(this.interval);

  }

  addTextLine() {
    this.content.push(this.lineCounter + ' ' + this.line)
    this.lineCounter++;
  }

}

scrollGlue.directive.ts

import {AfterContentInit, Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
  selector: '[scrollGlue]'
})

export class ScrollGlueDirective  implements AfterContentInit {
  public el: any;
  public isLocked: boolean = false;
  private _observer: any;
  private _oldScrollHeight: number = 0;

  constructor(private _el: ElementRef) {
    this.el = _el.nativeElement;
  }

  ngAfterContentInit() {
    this.el.scrollTop = this.el.scrollHeight;

    // create an observer instance
    this._observer = new MutationObserver((mutations) => {
      if ( !this.isLocked ) {
        this._oldScrollHeight = this.el.scrollHeight;
        this.el.scrollTop = this.el.scrollHeight;
      }
    });

    // configuration of the observer:
    let config = { childList: true, subtree: true };
    let target = this.el;

    // pass in the target node, as well as the observer options
    this._observer.observe(target, config);
  }

  @HostListener('scroll') onScroll() {
    this.el.scrollTop = this.el.scrollHeight;

    // let percent = (this.el.scrollHeight / 100);
    // console.log('percent', percent)
    // if (this.el.scrollHeight - this.el.scrollTop > (10 * percent)) {
    //   this.isLocked = true;
    // } else {
    //   this.isLocked = false;
    // }
  }

  OnDestroy() {
    this._observer.disconnect();
  }
}