如何在Angular6中执行自动滚动列表？

Question

嗨，我试图在页面init上实现自动滚动，但我没有得到解决方案是否有任何在Angular的构建方法？

我试过了

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  keyframes
} from '@angular/animations';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('popOverState', [
      state('show', style({
        opacity: 1
      })),
      state('hide',   style({
        opacity: 0
      })),
      transition('* => movedown',
          animate('2000ms', keyframes([
            style({top: '0%'}),
            style({top: '100%'}),
          ])
        )),
      transition('* => moveup',
          animate('2000ms', keyframes([
            style({top: '100%'}),
            style({top: '0%'}),
          ])
        )),
      transition('show => hide', animate('600ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))
    ])
  ]
})
export class AppComponent {
  title = 'my-app';
  switchOne = 'one';
  user = {
    detail: 'name'
  }
  items = [1,2,3,4,5,6,7,8,9,10,11,212,121,121,12,12,12,12,12,12,12,12,1,21,2,12,12,1,21,21,2,1,21,2,12,1,21,2,12,1,21,2,1,2,1323221,3,23,2,32,3,2,32,3,2,3];
  show = false;
  scroll = false;

  get stateName() {
    return this.show ? 'show' : 'hide'
  }

  get moveName() {
    return this.scroll ? 'movedown' : 'moveup';
  }
  toggle() {
    this.show = !this.show;
  }
  move() {
    this.scroll = !this.scroll;
  }


}

moveup和moveown动画使元素移动到顶部和底部，但需要是自动滚动。

  <li [@popOverState]="moveName" *ngFor="let item of items; index as i; trackBy: trackByFn">
    {{i}}
  </li>

我想滚动项目任何解决方案？

Answer 1

解决方案：您可以使用scrollTo API来实现此目的。据我所知，角度动画没有开箱即用的解决方案。

如何：要获得正确的坐标，您需要计算一个元素的高度（使用--getBoundingClientRect API）。

角度动画的优势：这是一个肯定有效的解决方案，并且由于其原生浏览器支持而且非常流畅和强大。