Question

我创建了一个文本滑块组件。 HTML看起来像这样：

<div class="text-slider" [@textAnimation]="textArray.length">
  <p *ngFor="let text of textArray"><b>{{ text }}</b></p>
</div>

，代码如下：

import { Component, Input, OnInit, } from '@angular/core';

import { textAnimation } from '../../../core/animations';

@Component({
  selector: 'pyb-text-slider',
  templateUrl: './text-slider.component.html',
  styleUrls: ['./text-slider.component.scss'],
  animations: [textAnimation]
})
export class TextSliderComponent implements OnInit {
  @Input() textArray: string[] = []

  constructor() { }

  ngOnInit() {

  }
}

样式如下：

.text-slider {
  height: 40px;
  width: 200px;
  overflow: hidden;
  position: relative;

  p {
    padding-left: 4px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    opacity: 0;
  }
}

最后，动画是这样的：

export const textAnimation = trigger('textAnimation', [
  transition('* => *', [
    query(':enter', [
      stagger(2500, [
        style({ transform: 'translateY(-100px)', opacity: '0' }),
        animate('5s', keyframes([
          style({ transform: 'translateY(-100px)', opacity: '1' }),
          style({ transform: 'translateY(0)', opacity: '1' }),
          style({ transform: 'translateY(0)', opacity: '1' }),
          style({ transform: 'translateY(100px)', opacity: '0' })
        ]))
      ])
    ], { optional: true })
  ])
]);

这在每个<p>元素之间创建了一个流畅的动画。我在以下位置创建了此文件：https://angular-x4h5x9.stackblitz.io

现在您可以看到它（并使用它）也许可以提供帮助。我会： -喜欢它可以永远滚动或 -停在最后一个<p>元素（在本例中为“动画”）

有可能吗？

文本滑块角度动画

0 个答案: